我正在使用带有 css-loader 的 webpack 来加载我的 css 样式并将它们添加到 React 组件中。
import styles from '../styles/cell.css';
.cell {
border-radius: 50%;
background-color: white;
}
<div className={styles.cell} />
我正在动态计算单元格的高度/宽度。在这里他们描述了如何动态地向组件添加样式，但我更喜欢在没有 style 属性的情况下这样做。
我尝试在其中一个父组件中执行此操作，认为它可能会更改 css 类，但这似乎不起作用。
import cell_styles from '../styles/cell.css';
cell_styles.width = this.cellSize + 'px'
cell_styles.height = this.cellSize + 'px'
关于如何最好地做到这一点的任何反馈？
您可以在动态的 CSS 属性（例如，宽度和高度）上尝试 CSS 自定义属性：
// cell.css
.cell {
width: var(--width);
height: var(--height);
}
然后你可以在父容器中提供 CSS 变量的值（CSS 变量也向下级联）：
<div style={{ '--width': `${something}px`, '--height': `${something}px` }}>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
将其视为传递给子项的“CSS 参数/props”。
这种方法的一个好处是您可以避免更新和重新渲染子组件。
您应该使用 style 属性，这就是它的目的。
import classLevelStyles from '../styles/cell.css';
const style = {
width: this.calcWidth() + 'px',
height: this.calcHeight() + 'px',
};
<div className={classLevelStyles} style={style} />