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.
You can use pseudo-classes, media queries and all other nested selectors with
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:
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: