How to apply Mantine styles.css only to React component(s) that exist "inside" a legacy web page?

Question

We are slowly migrating a legacy (non-React) web application built on top of Bootstrap 4.x to a React based framework. Our strategy involves replacing various elements of each page with React components until we can finally replace the entire page with a top level React app.

That said, we are wanting to use Mantine as our core component library and cannot figure out how to only apply the Mantine styles.css to our React components.

By inserting the the line import '@mantine/core/styles.css' in our React components, it still applies the styles globally - changing the look and feel of non-React page sections. Is there a way to only apply the Mantine styles.css locally to a single React component?

Answer 1

It turns out that if we instead import the Mantine styles.css (it's actually index.css) at the top level of our scss file, then we can have the Bootstrap styling override any conflicts. This seems to have solved the issue for now.

For example: main.scss

/* ---------------------------------------------------------
   Vendor Imports
   ---------------------------------------------------------*/
@import "../node_modules/@mantine/core/esm/index.css";
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/selectize-bootstrap4-theme/scss/selectize.bootstrap4.scss";