工具栏组件上的间距材料UI排版组件

Question

我是material ui的新手，不知道如何在工具栏上显示排版组件。我制作了一个简短的视频来展示我的问题：https://www.useloom.com/share/f2c391c010c142b4b659d805afe8c825

有人知道怎么做吗？

谢谢。

Answer 1

最简单的方法：

<Toolbar>
  <Typography style={{ marginRight: 16 }}>Home</Typography>
  <Typography style={{ marginRight: 16 }}>About</Typography>
  <Typography style={{ marginRight: 16 }}>Hire</Typography>
</Toolbar>

Answer 2

除了Marson Mao's answer之外，我还找到了另外两种方法来解决这个问题。

第一种方法是在JS中使用CSS并添加一个类--如下所示：

const styles = {

  grow: {
    flexGrow: 1,
  },
  menuText: {
    marginRight: 18
  }

};

<Typography variant="button" color="inherit" className={classes.menuText}>Home</Typography>

<Typography variant="button" color="inherit" className={classes.menuText}>About </Typography>

<Typography variant="button" color="inherit" className={classes.menuText}>Hire Me</Typography>

第二种选择是使用Button组件而不是排版组件--如下所示：

<Button variant="text" color="inherit">Home</Button>

<Button variant="text" color="inherit">About </Button>

<Button variant="text" color="inherit">Hire Me</Button>