3

首先，让我说我知道我有一个自定义组件“Card”，我在我的一条路线“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;
}

主页.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 的情况下表现一致的卡的推荐方法是什么？

4

2 回答 2

6

当我使用 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 的解决方案，我认为我不会提出这个解决方案，所以非常感谢你。

于 2018-07-04T21:46:56.190 回答
3

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

.card {display: block;}

.card.testCard { display: none; }
于 2018-07-04T20:09:01.097 回答