All Mantine components are styled with emotion. In some cases you will need to create custom emotion cache, for example to handle RTL direction.
By default, Mantine create emotion cache for you automatically.
If you need to change cache options, then use
createEmotionCache function to create new cache, it accepts
a configuration object with the following properties:
key(required) – the prefix before class names, defaults to
container– a DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
prepend- a boolean representing whether to prepend rather than append style tags into the specified container DOM node
stylisPlugins– an array of Stylis plugins that will be run by Stylis during preprocessing, for example stylis-plugin-rtl can be used to add RTL support
By default, Mantine components styles are prepended to head to allow overrides.
To make Mantine styles override other styles, create emotion cache with
With this option styles will be added at the end of
To change classes prefix create cache with key:
Now classes will follow this pattern:
To setup server side rendering with custom cache, you will need to provide the same emotion cache both to MantineProvider and to the server side code.
Example with Next.js (view full code on GitHub):