Добавление атрибутов стиля в класс css динамически в приложении для реагирования

Question

Я использую webpack с css-загрузчиком для загрузки стилей 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

Вы должны использовать атрибут стиля, который является его целью.

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

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

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