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 could try CSS custom properties on the CSS properties that are dynamic (eg, width and height):

// cell.css

.cell {
  width: var(--width);
  height: var(--height);
}

Then you can supply the values of the CSS variables in a parent container (CSS variables also cascade down):

<div style={{ '--width': `${something}px`, '--height': `${something}px` }}>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Treat it like a "CSS parameter/props" that passes down to children.

One good thing about this approach is you avoid updating and re-rendering the child components.

Answer 2

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} />