如何在 CSS 中选择 React 子组件

【问题标题】：How to select React subcomponents in CSS如何在 CSS 中选择 React 子组件
【发布时间】：2018-07-24 14:31:56
【问题描述】：

我正在为使用 React Semantic UI (https://react.semantic-ui.com/introduction) 的 React 应用程序编写 SCSS 文件。如何让 CSS 选择子组件？例如<Item.Group> 标签。

我不能只写Item.Group { ... }，因为它将 Group 识别为一个类，而不是 Item 的子组件。

【问题讨论】：

【解决方案1】：

我建议将className 添加到您要设置样式的组中，并在您的 SCSS 选择器中使用它。

如果您想为应用中的每个Item.Group 设置样式，您可以检查生成的 HTML 以查看默认情况下在项目组上设置了哪些类。查看语义 UI 文档，它似乎是 class="ui items"，所以 CSS 选择器将是 .ui.items

【讨论】：

好的，我想这样做，但想知道是否有更优雅的方法。
@NotAMonkey24 我认为.items 优雅。毕竟，语义 UI 都是关于语义命名约定的。 Item.Group 只是 React 组件的名称。它与创建的 HTML 元素（主要是 div）或类（遵循语义 CSS 库名称）无关。您可以将 css 内联到您的 React 中，但这需要高阶组件或重复。