React CSS 模块 - 将样式应用于子每个标签

Question

我正在努力为给定标签的每个子项应用 css 样式。我正在使用 CSS 模块和 semantic-ui-react:

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 模块来做吗？

Answer 1

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

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

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

现在您可以通过css访问它：

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

React CSS 模块 - 将样式应用于子每个标签

React CSS Modules - Apply style to child each tag

css

reactjs

css-modules

react-css-modules

semantic-ui-react