Hinzufügen style-Attribute, um eine css-Klasse dynamisch in der app reagieren

Ich bin mit webpack mit css-loader laden meiner css-Stile und fügen Sie Sie zu Reagieren-Komponenten.

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

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

<div className={styles.cell} />

Bin ich der Berechnung der Höhe/Breite der Zelle dynamisch. Hier Sie beschreiben, wie fügen Sie Stile hinzu, um Komponenten dynamisch zu, aber ich würde es vorziehen, dies zu tun, ohne das style-Attribut.

Ich habe versucht zu tun, die in einer der übergeordneten Komponenten denken, es könnte verändern Sie die css-Klasse, aber das schien nicht zu arbeiten.

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

Jedes feedback auf, wie am besten, dies zu tun?

InformationsquelleAutor nev.m | 2017-01-06
  1. 3

    Sollten Sie mit dem style-Attribut, 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} />
    • War neugierig, ob es irgendeine andere Art und Weise. In anycase dieser arbeitete für mich. Möchte nur darauf hinweisen, die-Eigenschaft auf das element "Stil" (nicht "Stil"). Danke.
    • goodpick bis, Tippfehler und bearbeitet
    InformationsquelleAutor Chris
  2. 1

    Könnten Sie versuchen, benutzerdefinierte CSS-Eigenschaften in der CSS-Eigenschaften, die dynamisch sind (z.B. Breite und Höhe):

    //cell.css

.cell {
  width: var(--width);
  height: var(--height);
}

    Dann können Sie liefern die Werte der CSS-Variablen [in einem übergeordneten container (CSS-Variablen auch Kaskade)]:

    <div style={{ '--width': `${something}px`, '--height': `${something}px` }}>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>
    InformationsquelleAutor Kalabasa
Schreibe einen Kommentar