在 React 应用程序中动态地将样式属性添加到 css class

Question

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

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

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

<div className={styles.cell} />

我正在动态计算单元格的 height/width。 Here 他们描述了如何动态地向组件添加样式，但我更喜欢在没有样式属性的情况下这样做。

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

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

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

Answer 1

您应该使用样式属性，这就是它的用途。

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

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

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

Answer 2

您可以在 CSS 动态属性（例如，宽度和高度）上尝试 CSS 自定义属性：

// cell.css

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

然后您可以在 parent 容器中提供 CSS 变量的值（CSS 变量也向下级联）：

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

把它当作传给 children 的 "CSS parameter/props"。

这种方法的一个好处是您可以避免更新 re-rendering child 组件。

在 React 应用程序中动态地将样式属性添加到 css class

Adding style attributes to a css class dynamically in react app

reactjs

css-loader