reactjs - 在React应用程序中动态添加样式属性到CSS类

Question

我使用 webpack 和 css-loader 来加载我的 css 样式并将它们添加到 React 组件中。

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

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

<div className={styles.cell} />

我正在动态计算单元格的高度/宽度。 Here他们描述了如何动态地将样式添加到组件，但我更喜欢在没有 style 属性的情况下执行此操作。

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

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

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

Answer 1

您可以在动态 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 参数/属性”。

这种方法的一个好处是可以避免更新和重新渲染子组件。