J'ai mon application de réaction où je veux appliquer Material-ui darkBaseTheme
. Sans cela, une partie de mon application ressemble à ceci:
Après avoir emballé tout le contenu html dans ma render()
avec:
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
</MuiThemeProvider>
, ayant ces importations:
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
, ça ressemble à ça:
Donc, cela a changé RaisedButtons
. Je sais que cela ne devrait pas changer les fichiers HTML. Mais pourquoi cela n'a-t-il pas changé le fond en sombre? Y a-t-il un moyen de faire cela, ou dois-je le faire manuellement sans matériel-ui?
Vous devez inclure le composant <CssBaseline />
à la racine de votre application, car il s’agit de la modification de la couleur d’arrière-plan du corps.
J'ai eu un problème similaire. L'arrière-plan du corps ne changeait pas lorsque je passais en mode dark
.
Solution:
Déplacez votre CssBaseline
dans MuiThemeProvider
. Sinon, l’arrière-plan du corps ne changera pas lorsque vous utiliserez le type dark
dans votre thème.
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>