I'm having difficulty applying CSS styles to each child of a specific tag. I am using CSS modules in conjunction 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;
The above method is not working for me. I attempted to manually apply the style through Chrome tools and the border appears properly visible. Where am I going wrong? Is it even feasible to achieve this using CSS modules?