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.
You can add pseudo-classes the same way as in any css-preprocessor like Sass:
You can receive any amount of parameters as second argument of
latter you will need to pass those parameters as argument to
Composition and nested selectors
createStyles produces scoped class names you will need to create a reference to selector
in order to get static selector.
getRef function to handle static selector creation:
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
as it will produce styles collisions.
You can use nested media queries like in Sass. Within query body you can use
defined with MantineProvider or just static values: