Having a css module that adds styling to an existing component is great until the default style of the component keeps overriding it.
Imagine having this structure:
<Header className={styles.header}>
<Row type="flex" justify="space-between">
<Col>
<Link to="/">
<Title className={styles.brand}>Shiritori</Title>
</Link>
</Col>
</Row>
</Header>
And applying styles from the css module like so:
.header {
background: rgb(75, 191, 107);
margin-bottom: 1rem;
> div {
align-items: center;
}
}
You'd expect the default background property to be replaced, but instead, the css module's styles get canceled out.
Here's what actually happens:
.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 gets overridden by .ant-layout-header's background
margin-bottom: 1rem;
}
I even made sure to check the order of css/scss imports, but the issue persists:
import "../../../node_modules/antd/dist/antd.css";
import styles from "./App.module.scss";
Is there a way to successfully overwrite an existing component's style while using antd for UI components?