apps/mantine.dev/src/pages/guides/gatsby.mdx
import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Gatsby);
Follow the Gatsby quick start guide to create a new Gatsby application:
<NpmScript yarnScript="yarn create gatsby" npmScript="npm init gatsby" />
When asked "Would you like to install a styling system?", select PostCSS.
Install PostCSS plugins and postcss-preset-mantine:
<InstallScript packages="postcss postcss-preset-mantine postcss-simple-vars" dev />
Create a postcss.config.cjs file at the root of your application with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
Create a src/theme.ts file with your theme override:
// src/theme.ts
import { createTheme } from '@mantine/core';
export const theme = createTheme({
fontFamily: 'serif',
// ... other theme override properties
});
Create a gatsby-ssr.tsx file with the following content:
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from './src/theme';
export const onPreRenderHTML = ({
getHeadComponents,
replaceHeadComponents,
}) => {
const headComponents = getHeadComponents();
replaceHeadComponents([
...headComponents,
<ColorSchemeScript key="color-scheme-script" />,
]);
};
export const wrapPageElement = ({ element }) => {
return <MantineProvider theme={theme}>{element}</MantineProvider>;
};
Create a gatsby-browser.tsx file with the following content:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import { theme } from './src/theme';
export const wrapPageElement = ({ element }) => {
return <MantineProvider theme={theme}>{element}</MantineProvider>;
};
All set! Start the development server:
npm run develop
By default, Gatsby has different syntax for importing CSS modules:
// Default syntax – will not work in Gatsby
import classes from './Demo.module.css';
// Gatsby syntax
import * as classes from './Demo.module.css';