如何覆蓋另一個 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

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

Answer 3

你試過在css使用!important嗎？ 我相信這似乎是問題所在。 下面是一個簡單的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對我!important效果很好......