Global styles on theme
The best way to add global styles is theme.globalStyles
, this way you will be able to share these styles between different environments (for example, Next.js application and Storybook):
Global component
Global
component is an alternative the theme.globalStyles
. styles
prop accepts:
- function that subscribes to theme and returns css object or an array of css objects
- css object or an array of css objects
Where to render Global
Usually global styles depend on theme, you can render Global
component anywhere within MantineProvider:
Load fonts
To load use array syntax. The following example shows how Mantine docs website loads GreycliffCF font: