Reagieren inline-Stilen anwenden von Stilen aus-Zustand

Mit npm-inline-css - Modul, bin ich versucht zu ändern, bestimmte Elemente der Seite Farben beim speichern der Formatvorlagen in einem Staat. Ich setze den Status hier:

setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;

    if(data) {
        headerStyles.backgroundColor = data.first_colour;
        headerStyles.color = data.theme;
    }
    this.setState({
        branding: data,
        headerStyles: headerStyles
    });
   },

Dann bin ich versucht, die Stile, die für die Komponente:

  render: function (){
    return (
        <div className="our-schools-app">
          <InlineCss stylesheet="
            & .button {
                color: {{this.state.color}};
            }
            " />
            <RouteHandler />  
        </div>
    );
}

Aber Sie eine Ausgabe wie unten. Wie kann ich die inline-styles? Oder eine bessere Art und Weise kann ich tun?

<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color:     {{this.state.color
}

}
; 
}
</style>
  • Es sieht aus wie Sie versuchen, ändern Sie die Stile für ein DOM-element mit einem 'button' Klasse, aber Sie sind nicht gerendert, das element in diese reagieren Komponente. Wäre es nicht sinnvoller zu erbringen, dass die DOM-element in dieser Komponente?
  • Auch wäre es hilfreich, wenn du posten könntest Ihre Routen.
InformationsquelleAutor Bomber | 2015-06-21
Schreibe einen Kommentar