createStyles
All Mantine components are built with emotion based css-in-js library.
We recommend using createStyles
to create styles for the rest of your application
as it provides the most convenient way to utilize Mantine theme, but it is not required
– you can use any other styling tools and languages.
Usage
Pseudo-classes
You can add pseudo-classes the same way as in any css-preprocessor like Sass:
Styles parameters
You can receive any amount of parameters as second argument of createStyles
function,
latter you will need to pass those parameters as argument to useStyles
hook:
Composition and nested selectors
Since createStyles
produces scoped class names you will need to create a reference to selector
in order to get static selector. Use getStylesRef
function to assign static selectors:
Classes merging (cx function)
To merge class names use cx
function, it has the same api as clsx package.
!important: Do not use external libraries like classnames
or clsx with class names created with createStyles
function
as it will produce styles collisions.
Media queries
You can use nested media queries like in Sass. Within query body you can use theme.breakpoints
defined with MantineProvider or just static values: