在React App中将样式属性动态添加到CSS类

Question

我正在将webpack与css-loader一起使用以加载我的css样式并将其添加到React组件中。

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

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

<div className={styles.cell} />

我正在动态计算单元格的高度/宽度。在这里，他们描述了如何动态地向组件添加样式，但是我更喜欢在没有样式属性的情况下进行。

我尝试在其中一个父组件中执行此操作，以为它可能会更改css类，但这似乎不起作用。

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

有关如何最好地做到这一点的任何反馈？

Answer 1

您应该使用style属性，这就是它的目的。

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

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

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