React CSS Modules - 将样式应用于每个标签的子标签答案

【问题标题】：React CSS Modules - Apply style to child each tagReact CSS Modules - 将样式应用于每个标签的子标签
【发布时间】：2019-12-17 13:38:51
【问题描述】：

我正在努力为给定标签的每个孩子应用 css 样式。我将 CSS 模块与语义 UI 反应一起使用：

character.module.css

.Character > GridColumn {
    border: solid 4px red;
}

character.js

import React, {Component} from 'react';
import {Grid, GridColumn} from "semantic-ui-react";
import styles from './character.module.css';

class Character extends Component {
    render() {
        return (
            <div>
             <Grid centered textAlign='center' className={styles.Character}>
                 <GridColumn floated='left' width={1}>
                     <h1>Some content</h1>
                 </GridColumn>
                 <GridColumn floated='right' width={2}>
                     <h1>Some content</h1>
                 </GridColumn>
             </Grid>
            </div>
        );
    }
}

export default Character;

上述方法不起作用。我尝试通过 chrome 工具手动应用样式，并且边框非常明显，我在哪里犯了错误？甚至可以使用 CSS 模块来实现吗？

【问题讨论】：

您无法从 css 访问 GridColumn ，因为它不是有效标签，请将其更改为 GridColumm 的包装 div .. 类似：.Character > div
其他解决方案是（对我来说这是一个更好的解决方案）将此类添加到每个GridColumn，现在您可以访问此类：类似于：.Character > .GridColumn

标签： css reactjs semantic-ui-react css-modules react-css-modules

【解决方案1】：

您无法从 css 访问 GridColumn，因为它不是有效标签。一种解决方案：将其更改为 GridColumm 的包装 div，类似于：

.Character > div {
    border: solid 4px red;
}

其他解决方案是为 css 模块文件中的每个 GridColumn 组件添加类，例如：.GridColumn

现在可以通过css访问了：

.Character > .GridColumnv{
    border: solid 4px red;
}

【讨论】：