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

Posted 2023-02-21

【中文标题】如何覆盖另一个css文件中的样式

【英文标题】：How to override styles from another css file

【发布时间】：2018-11-27 23:08:51

【问题描述】：

我有一个 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;

来自here，我使用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 文件放在单独的文件中。

提前致谢

【参考方案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;

【讨论】：

我试过这个。不幸的是，这对我不起作用。编译后得到另一个名字。

文字颜色没有变化吗？我在本地尝试了示例，它按预期工作。

是的，对我来说，文本的颜色不会像预期的那样变为蓝色。

【参考方案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);          

【参考方案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 对我来说效果很好...