CSS Priority

[silver monolith]

Classes placed inline within a component do not have higher priority. Can't you increase it?

// main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { Checkbox, createTheme, MantineProvider } from "@mantine/core";
import App from "./App.tsx";

import "@mantine/core/styles.css";

import ThemeCheckboxClasses from "./ThemeCheckbox.module.css";

const theme = createTheme({
  components: {
    Checkbox: Checkbox.extend({
      classNames: ThemeCheckboxClasses,
    }),
  },
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

// ThemeCheckbox.module.css
.label {
  padding-left: 30px;
}

// App.tsx

import { Checkbox } from "@mantine/core";
import CheckboxClasses from "./Checkbox.module.css";

const App = () => {
  return <Checkbox label="hello" classNames={CheckboxClasses} />;
};

export default App;

// Checkbox.module.css

.label {
  padding-left: 100px;
}

I want padding-left to be 100px, but it ends up being 30px. Is this by design? Can't I change this?

[silver monolith]

@empty osprey
Can you help me?

[balmy yacht]

or use !important

[ripe void]

TLDR: change the order of your imports, make sure generic styles are imported before inline/specific styles.

This mainly depends on your bundler.
In most cases, CSS that gets imported last takes precedence. That’s because in CSS, when two selectors match with the same specificity, that last one declared wins.
In your case you import the App component before importing the generic Checkbox theme styles. Therefore the inline styles are imported first, and the generic styles second, this is why the generic styles « win »

You can also leverage layers to avoid having to take caution with import orders. Wrap your generic styles in a @layer clause, they’ll automatically loose precedence over your inline/specific styles not in a layer.

[outer crater]

https://mantine.dev/styles/mantine-styles/#css-layers

[silver monolith]

This doesn't work!

import React from "react";
import ReactDOM from "react-dom/client";
import { Checkbox, createTheme, MantineProvider } from "@mantine/core";

import App from "./App.tsx";

import "@mantine/core/styles.layer.css"; // here

import ThemeCheckboxClasses from "./ThemeCheckbox.module.css";

const theme = createTheme({
  components: {
    Checkbox: Checkbox.extend({
      classNames: ThemeCheckboxClasses,
    }),
  },
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

It's still 30px.

[rough crane]

Also add @layer directive

// ThemeCheckbox.module.css
@layer {
  .label {
    padding-left: 30px;
  }
}

[silver monolith]

@rough crane wow! Very very very very very!!!! thank you!!!