CSS styling precedence when using React and CSS modules

Question

I have a css module which apply styling to an existing component. The css module works fine but the styling was always overwritten by the default style of component.

Supposed I have this markup.

 <Header className={styles.header}>
      <Row type="flex" justify="space-between">
        <Col>
          <Link to="/">
            <Title className={styles.brand}>Shiritori</Title>
          </Link>
        </Col>
      </Row>
 </Header>

Then uses the styles declare in the css module:

.header {
  background: rgb(75, 191, 107);
  margin-bottom: 1rem;

  > div {
    align-items: center;
  }
}

I expect that the background css property of the default style will be overwritten but instead the styles in my css module was canceled out.

Actual result:

.ant-layout-header {
    height: 64px;
    padding: 0 50px;
    line-height: 64px;
    background: #001529;
}
.ant-layout-header, .ant-layout-footer {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.ant-layout, .ant-layout * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.App_header__37gyT {
    background: #4bbf6b; <- this property was overwritten by the .ant-layout-header background property
    margin-bottom: 1rem;
}

I also consider the order of css/scss import but same result.

import "../../../node_modules/antd/dist/antd.css";
import styles from "./App.module.scss";

Is there a way to overwrite existing style of a component. I use antd for the UI toolkit and components.

Matt Carlotta · Accepted Answer · 2020-02-26 21:14:36Z

2

Unable to replicate your issue. Seems to be working fine:

That said, when dealing with CSS specificity, you can do one of several things:

Overwrite a child class style from a parent class style.
Use the id property: <Header id="header-id">Header</Header> (then use the # to refer to header: #header-id { ... })
Overwrite the .ant-layout class name within a separate CSS/SCSS file.
Add an !important declaration after the style property, for example: background: pink !important;

That said, I'd avoid importing the entire CSS library and instead use the babel plugin to import only what's needed.

answered Feb 26, 2020 at 21:14

Matt Carlotta

19.8k5 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ricardo Raz Over a year ago

It's weird, the sandbox is the same with mine but produces different results. I'll override the default css. Offtopic, how did you extract each class from the module. Got an error when extract classes in typescript.

Matt Carlotta Over a year ago

If you can't destruct class names, the it sounds like you might not be using css modules, but global modules instead. Are you using a custom webpack configuration? If so, does it handle local modules? If you're using the create-react-app, then local modules must be .module.(s)css, otherwise they're interpreted as global (S)CSS. If you're not using the CRA, then you have to manually configure webpack to handle local and global modules.

Ricardo Raz Over a year ago

I'm using CRA and destructure works but lints an error due to typescript. anyways thanks for the response.

Collectives™ on Stack Overflow

CSS styling precedence when using React and CSS modules

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related