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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vom Reagieren Docs:
Wie es aussieht, sind Sie wahrscheinlich versuchen, Stile, die für eine Schaltfläche, die es in Komponenten, die gerendert werden in RouteHandler.
Wenn das der Fall ist, es würde am meisten Sinn machen für Sie zu erstellen Sie eine wrapper umschließt, die andere Komponenten und übernimmt auch die Stile, die Sie versuchen, zu setzen.
Beispiel:
Edit: Pro Ihren Antrag, als ein Beispiel, um zu zeigen, wie Sie verschachtelte Routen funktionieren würde, fügte ich ein Anmeldeformular und Kontakt-Komponente. Wenn Sie einen Blick auf die Routen, die variable, die Sie sehen können, wie ich diese verschachtelten Komponenten unter PageWrapper.
Nun die verschachtelten Routen
/#/page/signup
und/#/page/contact
wird sowohl Zugriff auf die Requisiten, die Hinzugefügt werden, um das<RouteHandler />
von PageWrapper. Hoffe, das hilft!