Adding vertical divider to material-ui AppBar component

Question

How can we set vertical divider to AppBar like muicss's Left/Right divider component?

Simply inserting div element with height: 100% does not work.

<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>

Here is the live example code. https://codesandbox.io/s/54070o6v2x

Thank you.

My environment

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

Answer 1

You can use a right border in order to add a vertical divider. Use em for the border size and padding size so that your elements are responsive. You can see the result here

<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>

Answer 2

This can also be used for vertical menubar dividers:

<Divider orientation="vertical" flexItem />

See here: https://material-ui.com/components/dividers/