reactjs 如何覆盖其他css文件中的样式

ckocjqey 于 2022-12-03 发布在 React

关注(0)|答案(3)|浏览(222)

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

reactjs

来源：https://stackoverflow.com/questions/50920730/how-to-override-styles-from-another-css-file

3条答案

按热度按时间

yqlxgs2m1#

要覆盖其他文件的样式，可以通过从父div中提供一个特定性来实现。大多数特定性解决覆盖其他文件的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;
}

赞(0）回复(0）举报 2022-12-03

ttvkxqim2#

你可以只使用vanilla JavaScript来替换网页上特定的css链接。我还建议使用事件监听器来等待页面加载&然后进行替换。
以下是一个示例：

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);          
}

赞(0）回复(0）举报 2022-12-03

svmlkihl3#

你试过在css中使用!important吗？我认为这似乎是问题所在。下面是一个简单的html示例：
第一个
正如您所看到的，使用!important对我来说非常有效...

赞(0）回复(0）举报 2022-12-03