How to Override Global CSS in a CSS Module File

How to override global CSS in a CSS module file?

Since .flex refers to a global class you'll need to use the :global selector to target it in your CSS module.

/* Layout.module.css */

.navbar :global(.flex) {
    justify-content: space-between;
}

Or using an alternate syntax.

.navbar {
    :global {
        .flex {
            justify-content: space-between;
        }
    }
}

How to apply global styles with CSS modules in a react app?

Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet

import './App.css'

Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)

:global(.myclass) {
  background-color: red;
}

Can I override Material-UI with css modules in create-react-app v2?

In my recent project i did things like

import './style.css';

where this is example content of style.css

.detailbox-paper {
  width: 90vw;
  margin: 20px auto 0px auto;
}

where i consumed it by using a className on the element like this
<Paper className="detailbox-paper">
and it worked. One thing to keep in mind by this approach, is the css specificity you are then starting to fight with.

You can also use inline styles={{}} with the camelCase syntax for attributes. But, as far as i know, inline styles always will be set, exept there is the !important keyword.

Hopefully this could help you on your journey.

Can you overwrite styles in Material UI using css/scss?

Below is the correct syntax:

.button {
  padding: 10px;
  margin-bottom: 10px;
  &:global(.MuiButton-containedPrimary) {
    border: 2px solid red;
    background-color: red;
  }
}

The example above has two key changes:

1. Using :global(.MuiButton-containedPrimary). Without using :global, CSS modules will transform the MuiButton-containedPrimary into a class name unique to this module and then it won't match what Material-UI puts on the button.

2. Adding the & in front effectively creates a selector like .button.MuiButton-containedPrimary matching an element with both classes on it. Your original syntax would treat .MuiButton-containedPrimary as a descendant selector and only match elements with that class that are a descendant of the button rather than the button itself.

CSS Modules, React and Overriding CSS Classes

Old post but still relevant, so adding an answer to help those with similar issue

While not inherently possible in CSS modules alone, the author of the react-toolbox library has actually solved this particular problem very nicely

Read their github docs which are more in depth on the subject at https://github.com/react-toolbox/react-toolbox#customizing-components

A list of the themeable classes for a particular component is given on the component demo page on their site too

In your case as well as passing a className for tab, you would also create a theme with classes that overrides that desired parts of the default theme and pass that as the theme prop. For example something alog the lines of...

MyComponentWithTabs.css

.tab {
  color: white;
}

MyTabTheme.css

.active {
  color: hotpink;
}

MyComponentWithTabs.js

import styles from './MyComponentWithTabs.css'
import tabTheme from './MyTabTheme.css'

// blah blah...

return <Tab key={index} className={styles.tab} theme={tabTheme} />

Under the surface this uses a decorator they have abstracted into separate library react-css-themr, I recommend giving that a read too as it explains how the defaults are composed with your overrides in much greater depth, including the different merging strategies they use

---

Related Topics