sx prop
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 object
With 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 sx
:
Subscribe to theme
Use function instead of an object to subscribe to the theme:
sx array
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 packSx
function:
You will also need to use packSx
function if you are extending DefaultProps type:
Box component
Box is an utility polymorphic component
that can be used to style non Mantine components or elements with sx
prop:
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: