Hinzufügen von Stilattributen zu einer CSS-Klasse dynamisch in react app

Question

Ich benutze Webpack mit CSS-Loader, um meine CSS-Stile zu laden und sie React-Komponenten hinzufügen.

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

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

<div className={styles.cell} /> 

Ich berechne die Höhe/Breite für die Zelle dynamisch. Here sie beschreiben, wie Stile zu Komponenten dynamisch hinzugefügt werden, aber ich würde dies ohne das Attribut style tun.

Ich habe versucht, dies in einer der Elternkomponenten zu tun, die denken, es könnte die CSS-Klasse ändern, aber das schien nicht zu funktionieren.

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

Gibt es Feedback dazu, wie dies am besten funktioniert?

Answer 1

Sie sollten das style-Attribut verwenden, das ist der Zweck davon.

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

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

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