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
3条答案
按热度按时间yqlxgs2m1#
要覆盖其他文件的样式,可以通过从父div中提供一个特定性来实现。大多数特定性解决覆盖其他文件的CSS。
ttvkxqim2#
你可以只使用vanilla JavaScript来替换网页上特定的css链接。我还建议使用事件监听器来等待页面加载&然后进行替换。
以下是一个示例:
svmlkihl3#
你试过在
css
中使用!important
吗?我认为这似乎是问题所在。下面是一个简单的html
示例:第一个
正如您所看到的,使用
!important
对我来说非常有效...