API REFERENCE

Header

Usage example

From v4.5.0 onward

You don’t need to use Toolbar component from Material-UI since css: height will be attached to Header by initialHeight config and Header will have display: flex by default.

import styled from 'styled-components'
import Layout, { Root, getHeader } from '@mui-treasury/layout';

const Header = getHeader(styled)

cosnt scheme = Layout()

const App = () => {
  return (
    <Root scheme={scheme}>
      <Header>
        <img alt={'logo'} src={'...'} />
        <div>
          ...
        </div>
      </Header>
    </Root>
  )
}

Before v4.5.0

import styled from 'styled-components'
import Toolbar from '@material-ui/core/Toolbar';
import Layout, { Root, getHeader } from '@mui-treasury/layout';

const Header = getHeader(styled)

cosnt scheme = Layout()

const App = () => {
  return (
    <Root scheme={scheme}>
      <Header>
        <Toolbar>header</Toolbar>s
      </Header>
    </Root>
  )
}

Normally, you might want to put Toolbar inside of header as a wrapper.

Props

Any props that AppBar accepts

Styling

Refer to AppBar CSS api