首先,我知道我有一个自定义组件“卡”,我在我的一条路线“Home”中使用它。
Card.js
import s from 'Card.css';
class Card {
...
render(){
return (<div className={cx(className, s.card)}>
{this.props.children}
</div>);
}
}
卡片. css
.card {
display: block;
}
Home.js
<Card className={s.testCard}>
...
</Card>
Home.css
.testCard { display: none; }
我在这里遇到的一个问题是,即使我将显示设置为none,卡片仍然可见,因为浏览器中的CSS排序看起来是随机的。即使禁用了Javascript,这种顺序也不会改变。
为了得到。测试卡正确加载后。卡,我用“作曲:
Home.css
.testCard {
composes: card from 'components/Card.css';
display: none;
}
显然,这导致css-loader认识到这一点。testCard应该在. Card之后加载。除非我禁用了Javascript,否则页面会恢复到原来的行为。之后加载卡。测试卡,它又变得可见。
有什么推荐的方法可以让我们的页面优先排序?在启用或不启用Javascript的情况下,行为一致的卡上的测试卡?
由于我使用的是CSS模块,charlietfl解决方案实际上不能正常工作。。卡会自动被改成类似。Card-card-l2hne,所以从不同的组件引用它是行不通的。如果我把它导入Home.css的CSS文件,那也不行,因为它创建了一个名为。家庭卡信息,而不是指。卡-卡-l2hna。
我真的不认为有很好的方法来解决这个问题,所以我求助于更具体的使用父类来代替。
例如,Home.js:
import s from 'Home.css';
import Card from './components/Card';
class Home {
...
render(){
return (
<div className={s.root}>
<Card className={s.testCard}>Hi</Card>
</div>
);
}
}
Home.css
.root {
margin: 10px;
}
.root > .testCard {
display: none;
}
这样,我们不需要知道component Card在内部使用什么类名,特别是在CSS模块或样式化组件的情况下,类名是一些唯一生成的名称。
如果没有charlieftl的解决方案,我想我不会有这个解决方案,所以非常感谢你。
通过组合类使testCard规则更加具体
.card {display: block;}
.card.testCard { display: none; }
Css特异性是基于所使用的选择器来计算的。 元素选择器的值为1 类选择器的值为10 ID选择器的值为100 内联css的值为1000。
因此,如果您使用以上这些规则指定更多,您可以实现应用哪个规则。
比如说。在制造选择器的情况下
。卡对卡。测试卡
。root & gt。测试卡
(使用此处发布的示例)
计算的特异性值为:
。卡= 10 . card.testCard = 100 。root & gt。测试卡= 100 因此,通过添加类、id或元素来使用更多指定的选择器增加了特异性点,并应用具有最高特异性值的规则。
警告:如果指向同一个元素的选择器有相同的值,那么最新的规则获胜。 所以在这个例子中
<style>
.card.testCard { color: red; }
.root > .testCard { color: green; }
</style>
此处选择的样式将是绿色,即使两者具有相同的特性,因为最新的规则获胜。