React CSS Modules — применить стиль к дочернему тегу

Я борюсь с применением стиля CSS для каждого дочернего элемента данного тега. Я использую модули CSS вместе с semantic-ui-react:

характер.модуль.css

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

характер.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?


reactjs css css-modules react-css-modules semantic-ui-react
person Kamil W    schedule 09.08.2019    source источник
comment
Вы не можете получить доступ к GridColumn из css, так как это недопустимый тег, измените его на оболочку div GridColumm .. что-то вроде: .Character > div   -  person Kareem Dabbeet    schedule 09.08.2019
comment
другое решение (для меня это лучшее решение) добавить этот класс к каждому GridColumn, теперь вы можете получить доступ к этому классу: что-то вроде: .Character > .GridColumn   -  person Kareem Dabbeet    schedule 09.08.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете получить доступ к GridColumn из css, так как это недействительный тег. Одно решение: измените его на div-оболочку GridColumm, например:

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

Другое решение - добавить класс к каждому компоненту GridColumn в файле модуля css, например: .GridColumn

Теперь вы можете получить к нему доступ через css:

.Character > .GridColumnv{
    border: solid 4px red;
}
person Kareem Dabbeet    schedule 09.08.2019