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.
- As fast and lightweight as emotion:
- Subscribes to your Mantine theming context
- Supports all emotion features: automatic critical css extraction during server side rendering, lazy evaluation, dynamic theming, etc.
- Server side rendering support: Next.js, Gatsby or any other environment
- Fully featured TypeScript support
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
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:
To merge class names use
cx function, it has the same api as clsx package.
You can use nested media queries like in Sass. Within query body you can use
defined via MantineProvider or just static values:
use-css hook is a simpler alternative to
css function accepts styles object and returns class name.
css function cannot subscribe to
theme, if you need this use
useMantineTheme hook or
To set global styles use
You can use
MantineProvider without any other Mantine packages:
After installation you can import
createStyles and other function from
@mantine/styles instead of
@mantine/core and use it separately:
Yes, you can. But please note that Mantine already uses emotion and you may
have styles collisions and would have to overwrite styles with
!important. Please consider
createStyle before picking other libraries.