React CSS Modules - Apply style to child each tag

Question

I'm struggling with applying css style for each child of given tag. I'm using CSS modules together with 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;

Above approach doesn't work. I tried to apply style manually via chrome tools and border is pretty visible, where I'm making misatke? Is it even possible to do it with CSS modules?

Answer 1

You cant access GridColumn from css as it's not a valid tag. One Solution: change it to the wrapper div of GridColumm, something like:

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

Other Solution is to add class to each GridColumn component in css module file, something like: .GridColumn

Now you can access it through css:

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