All Mantine components support
sx prop. With
sx you can add styles to component root element.
If you need to customize styles of other elements within component use Styles API.
sx prop, you can add inline styles to any component.
Styles added with
sx will be parsed by emotion
and added to the
head or specified target container in emotion cache.
You can use pseudo-classes, media queries and all other nested selectors with
Subscribe to theme
Use function instead of an object to subscribe to the theme:
Array syntax can be used to simultaneously use
sx prop and add it from props:
If you want to keep
sx array syntax support for child component use
You will also need to use
packSx function if you are extending DefaultProps type:
Box is an utility polymorphic component
that can be used to style non Mantine components or elements with
Storing styles in a variable
To create sharable styles you can store them in a variable:
To store function styles in a variable you will need to use
MantineTheme type in case you are using TypeScript: