All Mantine components support
sx prop. With
sx you can add styles to component root element.
If you need to customize other elements within component use Styles API.
sx prop, you can add inline styles to any component the same way you would do it as with createStyles
function. Styles added with
sx will be parsed by emotion and added to page head or specified target container in MantineProvider.
You can use pseudo-classes, media queries and all other nested selectors with
Use a function instead of an object to subscribe to Mantine theme:
Array syntax can be used to simultaneously use
sx prop and add it from props:
Box is an utility polymorphic component that can be used to style non Mantine components or elements with sx:
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: