Question

如何将垂直分隔线设置为AppBar，如muicss's Left/Right divider component？

简单地使用height: 100%插入div元素不起作用。

<AppBar position="static" color="default">
  <Toolbar>
    <Typography type="title" color="inherit">
      Title
    </Typography>
    <div style={{
      border: 'solid #ff0000',
      height: '100%'
      }}>
    </div>
    <Typography type="title" color="inherit">
      Title 2
    </Typography> 
  </Toolbar>
</AppBar>

这是实例示例代码。 https://codesandbox.io/s/54070o6v2x

谢谢。

我的环境

| Tech         | Version |
|--------------|---------|
| Material-UI  | next    |
| React        | 16.2.0  |
| Browser      | Chrome 63.0.3239.84 |

Answer 1

您可以使用右边框来添加垂直分隔线。使用 em 作为边框大小和填充大小，以便您的元素具有响应性。您可以看到结果here

＆＃13;

<Toolbar>
  <Typography
    type="title"
    color="inherit"
    style={{ borderRight: '0.1em solid black', padding: '0.5em' }}
    >
    Title
  </Typography>

  <Typography type="title" color="inherit" style={{ padding: '0.5em' }}>
    Title 2
  </Typography>
</Toolbar>

＆＃13;

Answer 2

这也可以用于垂直菜单栏分隔符：

<Divider orientation="vertical" flexItem />

查看此处：https://material-ui.com/components/dividers/

将垂直分隔符添加到material-ui AppBar组件

我的环境

2 个答案: