web-dev-qa-db-fra.com

Le thème sombre de Material-ui n'est pas appliqué à l'arrière-plan

J'ai mon application de réaction où je veux appliquer Material-ui darkBaseTheme. Sans cela, une partie de mon application ressemble à ceci:

 enter image description here

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:

 enter image description here

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?

reactjsmaterial-ui
7
minecraftplayer1234

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. 

Docs

6
Will

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>
2
Mario Campa