リアクションアプリケーションでCSSクラスにスタイル属性を動的に追加

Question

CSSスタイルを読み込んでReactコンポーネントに追加するには、webpack with css-loaderを使用しています。

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

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

<div className={styles.cell} /> 

私はセルの高さ/幅を動的に計算しています。 Hereこれは、コンポーネントにスタイルを動的に追加する方法を記述していますが、スタイル属性なしでこれを行うことをお勧めします。

親コンポーネントの1つで、これをCSSクラスを変更する可能性があると考えていましたが、うまくいかなかったようです。

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} />