CSS 模块的 CSS 特异性

Question

首先，让我说我知道我有一个自定义组件“卡片”，我在其中一个路线“主页”中使用了它。

卡.js

import s from 'Card.css';
class Card {
    ...
    render(){
        return (<div className={cx(className, s.card)}>
            {this.props.children}
        </div>);
    }
}

卡片文件

.card {
    display: block;
}

主页.js

<Card className={s.testCard}>
...
</Card>

主页.css

.testCard { display: none; }

我在这里遇到的一个问题是，即使我将显示设置为无，卡片仍然可见，因为浏览器中的 CSS 顺序似乎是随机的。即使禁用了 Javascript，此顺序也不会改变。

为了让 .testCard 在 .card 之后正确加载，我使用了“composes:”：

主页.css

.testCard {
    composes: card from 'components/Card.css';
    display: none;
}

显然这会导致 css-loader 识别 .testCard 应该在 .card 之后加载。除了，如果我禁用 Javascript，页面将恢复到旧行为：.card 在 .testCard 之后加载，它再次变得可见。

让我们的页面优先考虑 .testCard 而不是在启用或不启用 Javascript 的情况下行为一致的卡片的推荐方法是什么？

Answer 1

当我使用 CSS 模块时，charlietfl 解决方案不会真正起作用。.card被.Card-card-l2hnecss-loader自动修改为一个名称，因此从不同的组件引用它是行不通的。如果我将它导入到 的 CSS 文件中Home.css，那也不起作用，因为它创建了一个名为 的新类.Home-card-lnfq，而不是引用.Card-card-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>
        );
    }
}

主页.css

.root {
    margin: 10px;
}
.root > .testCard {
    display: none;
}

这样，我们就不需要知道组件Card在内部使用什么类名，特别是在 CSS 模块或样式组件等情况下，类名是一些唯一生成的名称。

如果不是 charlieftl 的解决方案，我认为我不会来这个解决方案，所以非常感谢你。

Answer 2

只需通过组合类使 testCard 规则更加具体

.card {display: block;}

.card.testCard { display: none; }