在反應應用程序中動態添加樣式屬性

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屬性，這就是它的目的。

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

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

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