How to override styles from another css file - css

Question

I have a css file (main.css) and I'd like to override it using another css file (overrides.css). But I have problem doing it as they are in different files and they get different hashes.
This is my css:
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainer h1{
color: blue;
}
From here, I used Object.assign() to combine css files but it didn't help. This is my component:
import React from 'react';
import Main from './main.css';
import Overrides from './overrides.css';
const Style = Object.assign({}, Overrides, Main);
class Sample extends React.Component{
render(){
return (
<div className={Style.mainContainer}>
<h1>Hello</h1>
<p>Hello CSS modules!</p>
</div>
);
}
}
export default Sample;
I expect my h1 to become blue but it won't. This is my compiled css:
/* main.css */
._1pXpG {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
._1pXpG h1{
color: white;
}
/* overrides.css */
.Wmy0p h1{
color: blue;
}
I expect .Wmy0p h1 to be ._1pXpG h1 so it can override. But it won't. Note that if you just paste the content of overrides.css at the bottom of the main css it will work but I need my override css file to be in a separate file.
Thanks in advance

Answer 1

To over ride styles from other file can be made by giving one more specificity from parent div. Mostly specificity solves to override other files CSS.
class Sample extends React.Component{
render(){
return (
<div className={Style.mainContainerDetails}>
<div className={Style.mainContainer}>
<h1>Hello</h1>
<p>Hello CSS modules!</p>
</div>
</div>
);
}
}
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainerDetails .mainContainer h1{
color: blue;
}

Answer 2

You can just use vanilla JavaScript to replace that specific css link on the webpage.
I also suggest using an event listener to wait until the page is loaded & then make the replacement.
Here is an example:
function overrideCommonCss() {
var webpageCurrentLink = "main.css", webpageNewLink = "overrides.css", webpageFoundLink, webpageCssTags = 0,webpageAllCssLinks = document.getElementsByTagName("LINK");
if (webpageAllCssLinks) {
for (webpageCssTags = 0;webpageCssTags < webpageAllCssLinks.length;webpageCssTags++) {
webpageFoundLink = webpageAllCssLinks[webpageCssTags].href;
if (webpageFoundLink.indexOf(webpageCurrentLink) !== -1) {
webpageAllCssLinks[webpageCssTags].href = webpageAllCssLinks[webpageCssTags].href.replace(webpageCurrentLink, webpageNewLink);
break;
}
}
}
}
if(window.attachEvent) {
window.attachEvent("onload", overrideCommonCss);
}
else {
window.addEventListener("load", overrideCommonCss, false);
}

Answer 3

have you tried using the !important in css? I believe that seems to be the problem. Below is an example, in plain html:
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainer h1{
color: blue;
}
<div class="mainContainer">
<h1>Hello World!</h1>
</div>
As you can see, using !important works pretty well for me...