Adding style attributes to a css class dynamically in react app

Question

I'm using webpack with css-loader to load my css styles and add them to React components.

import styles from '../styles/cell.css';

.cell {
    border-radius: 50%;
    background-color: white;
}

<div className={styles.cell} />

I'm calculating the height/width for the cell dynamically. Here they describe how to add styles to components dynamically, but i'd prefer doing this without the style attribute.

I tried doing this in one of the parent components thinking it might alter the css class but that didn't seem to work.

import cell_styles from '../styles/cell.css';
cell_styles.width = this.cellSize + 'px'
cell_styles.height = this.cellSize + 'px'

Any feedback on how best to do this?

Answer 1

You should be using the style attribute, that is the purpose of it.

import classLevelStyles from '../styles/cell.css';

const style = {
    width:  this.calcWidth()  + 'px',
    height: this.calcHeight() + 'px',
};

<div className={classLevelStyles} style={style} />