React如何为特定组件生成单独的样式表？

Question

在这里，我想为Landing组件以及希望为其他组件生成一个单独的样式表。其他组件也将具有英雄组件。谁能告诉我该怎么做？这是个好主意吗？。

Answer 1

任何带有下划线_name.scss的内容，都会告诉您的sass编译器这是部分scss文件。只是不要对单个组件的scss文件使用下划线，例如：Hero.scss。然后，您可以在Hero.js中导入样式，如下所示：

import './Hero.scss';

<div className="heroContainer">...</div>

或者，如果您的Webpack已配置为允许导入scss模块，则可以执行以下操作：

import { heroContainer } from './Hero.scss';

<div className={heroContainer}>...</div>

如果要与其他样式表共享heroContainer的样式，只需在scss文件中使用@extend。

clientsContainer {
  @extend .heroContainer;
}

此方法的缺点是您必须手动将任何部分（例如_vars.scss，_mixins.scss ...等以及任何其他从属样式表导入每个新的Example.scss中）文件。

理想情况下，如果您在一个大型团队中工作，最好将您的scss样式表个性化，以便所有内容都是模块化的（组件及其样式可以传递给其他人，而不必发送所有样式表）一个组件）。