Can I use Mantine with Create React App (CRA)?

Last updated November 30, 2023

Deprecation notice

Create React App was deprecated in early 2023 (comment from maintainers). It is not recommended to use it for new projects. It is recommended to use Vite or Next.js instead. Starting from version 7.0 some of Mantine styling features are not officially supported in Create React App.

If you want to build a single page application, use Vite instead:

Usage without postcss-preset-mantine

To compile styles as shown in documentation, postcss-preset-mantine is required. Create React App does not support custom PostCSS configuration by default.

The easiest way to use Mantine with Create React App is to write styles in plain CSS without postcss-preset-mantine.

rem/em function and CSS nesting:

// ❌ Does not work with Create React App
.demo {
  font-size: rem(16px);

  @media (min-width: em(320px)) {
    font-size: rem(32px);
  }
}

// ✅ Works with Create React App
.demo {
  font-size: calc(1rem * var(--mantine-scale));
}

@media (min-width: 20em) {
  .demo {
    font-size: calc(2rem * var(--mantine-scale));
  }
}

Mixins:

// ❌ Does not work with Create React App
.demo {
  @mixin light {
    color: red;
  }

  @mixin dark {
    color: blue;
  }
}

// ✅ Works with Create React App
[data-mantine-color-scheme='light'] .demo {
  color: red;
}

[data-mantine-color-scheme='dark'] .demo {
  color: blue;
}

light-dark function:

// ❌ Does not work with Create React App
.demo {
  color: light-dark(red, blue);
}

// ✅ Works with Create React App
[data-mantine-color-scheme='light'] .demo {
  color: red;
}

[data-mantine-color-scheme='dark'] .demo {
  color: blue;
}

Ejecting Create React App

If you still want to use postcss-preset-mantine with Create React App, you can eject your application and add custom PostCSS configuration.

Eject your application – npm run eject
Install dependencies – yarn add postcss postcss-preset-mantine @mantine/core @mantine/hooks
Create postcss.config.js file in the root of your project with the following content:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {},
    'postcss-normalize': {},
  },
};

Replace postcss-loader configuration in config/webpack.config.js with the following:

{
  loader: require.resolve("postcss-loader"),
  options: {
    postcssOptions: {
      ident: "postcss",
    },
    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
  },
}

After that follow Vite getting started guide except for the first step (you already have postcss.config.js file)

Ejected CRA example

You can find an example repository with ejected CRA application and full setup here.