Layouts
By leveraging the variants feature, you can create custom themeable layout components. The components can include some default styles, but still allow users to override styles such as colors or typography, by changing values in the theme object.
To start, create a layout component that will wrap pages in your application. Feel free to customize the content and default styles however you like.
// example src/layout.js/** @jsxImportSource theme-ui */export default (props) => (<divsx={{display: 'flex',flexDirection: 'column',minHeight: '100vh',}}><headersx={{width: '100%',display: 'flex',alignItems: 'center',}}>Header content</header><mainsx={{width: '100%',flex: '1 1 auto',}}><divsx={{maxWidth: 768,mx: 'auto',px: 3,}}>{props.children}</div></main><footersx={{width: '100%',}}>Footer content</footer></div>)
Next use the variant
property to name parts of the layout.
// example src/layout.js/** @jsxImportSource theme-ui */export default (props) => (<divsx={{display: 'flex',flexDirection: 'column',minHeight: '100vh',variant: 'layout.root',}}><headersx={{width: '100%',display: 'flex',alignItems: 'center',variant: 'layout.header',}}>Header content</header><mainsx={{width: '100%',flex: '1 1 auto',variant: 'layout.main',}}><divsx={{maxWidth: 768,mx: 'auto',px: 3,variant: 'layout.container',}}>{props.children}</div></main><footersx={{width: '100%',variant: 'layout.footer',}}>Footer content</footer></div>)
The variant
properties above will look for styles in theme.layout
.
If no styles are defined in the theme, the default styles will remain unchanged.
If a user wants to customize the layout styles, they can add overrides to their theme object. For example, the following will add custom colors to the header and footer.
Edit the page on GitHub// example user themeimport colors from './colors'export default {colors,layout: {header: {color: 'white',backgroundColor: 'black',},footer: {color: 'white',backgroundColor: 'black',},},}