API REFERENCE

Inset Container

Extends Material-UI Container with some styling. Always use this component along with InsetSidebar for inset layout pattern.

Usage example

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

const InsetContainer = getInsetContainer(styled)

cosnt scheme = Layout()

scheme.configureInsetSidebar((builder) => {
  builder
    .create("primarySidebar", { anchor: "right" })
    .registerStickyConfig("md", {
      width: 256,
      top: 0,
    });
});

const App = () => {
  return (
    <Root scheme={scheme}>
      <Content>
        <InsetContainer
          rightSidebar={<InsetSidebar />}
          // leftSidebar
        >
          content
        </InsetContainer>
      </Content>
    </Root>
  )
}

Props

  • leftSidebar
    • type : ReactNode
    • description : node will be render on your left side
  • rightSidebar
    • type : ReactNode
    • description : node will be render on your right side
  • children
    • type : ReactNode
    • description : content
  • other props refer to Material-UI Container

Styling

refer to Container css api


Related components