Question

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

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

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

<div className={styles.cell} />

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

我尝试在其中一个父组件中执行此操作，认为它可能会改变css类但但似乎无法正常工作。

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

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

Answer 1

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

distinctValues = view.ToTable(true, "NAT_NAME");
ddlNationality.DataSource = distinctValues;
ddlNationality.DataTextField = "NAT_NAME";
ddlNationality.DataValueField = "NAT_code";
ddlNationality.DataBind();

Answer 2

您可以在动态的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类

2 个答案: