如何覆盖另一个CSS文件的样式

Question

我有一个 css 文件 (

main.css

)，我想使用另一个 css 文件 (

overrides.css

) 覆盖它。但我在执行此操作时遇到问题，因为它们位于不同的文件中并且它们获得不同的哈希值。

这是我的CSS：

/* main.css */
.mainContainer {
    padding: 16px;
    margin: 16px;
    background-color: palevioletred;
    border-radius: 5px;
}

.mainContainer h1{
    color: white;
}


/* overrides.css */
.mainContainer h1{
    color: blue;
}

从这里，我使用

Object.assign()

来组合css文件，但没有帮助。这是我的组件：

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;

我希望我的

h1

变成蓝色，但事实并非如此。这是我编译的CSS：

/* main.css */
._1pXpG {
    padding: 16px;
    margin: 16px;
    background-color: palevioletred;
    border-radius: 5px;
}
._1pXpG h1{
    color: white;
}


/* overrides.css */
.Wmy0p h1{
  color: blue;
}

我希望

.Wmy0p h1

是

._1pXpG h1

，这样它就可以覆盖。但它不会。请注意，如果您只是将

overrides.css

的内容粘贴到主 css 的底部，它将起作用，但我需要将我的覆盖 css 文件放在单独的文件中。

提前致谢

Answer 1

要覆盖其他文件中的样式，可以通过从父 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;
}

Answer 2

您可以使用普通 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);          
}

Answer 3

您尝试过在

!important

中使用

css

吗？我相信这似乎是问题所在。下面是一个简单的例子

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>

如您所见，使用

!important

对我来说效果很好......