Question

我是材料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 variant="text" color="inherit">Home</Button>

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

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

在工具栏组件上腾出材料UI印刷组件

2 个答案: