material-ui createMuiTheme palette type dark does not change textcolor to light

Question

I have set the palette type: dark in createMuiTheme and it changes the background color to dark, which is good. But the text color stays black. Shouldn't it adapt a lighter color?

CodeSandbox link : https://codesandbox.io/s/j22rvq4w2v

import React from 'react'; 
import ReactDOM from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import App from './App';

const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

ReactDOM.render(

<MuiThemeProvider theme={theme}>
    <React.Fragment>
        <CssBaseline />
            <App/>
    </React.Fragment>
</MuiThemeProvider>,
     document.getElementById('app'));

The app component just contains an AppBar and simple text.

Update: The version of material-ui I have, which I mentioned earlier as v1 is incorrect. Sorry about misinformationtion and it is 3.10.10

Answer 1

You are simply misinterpreting what CssBaseline is for. That component is some kind of CSS resetter, and doesn’t add any visual style — only layout, box-sizing stuff.

What you really want is the Typography component.

See the updated and working CodeSandbox.

Answer 2

You need to import the proper color then:

import React from "react";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import blueGrey from "@material-ui/core/colors/blueGrey";
import lightGreen from "@material-ui/core/colors/lightGreen";
import Reset from "@material-ui/core/CssBaseline";

const theme = createMuiTheme({
  palette: {
    primary: {
      light: lightGreen[300],
      main: lightGreen[500],
      dark: lightGreen[700]
    },
    secondary: {
      light: blueGrey[300],
      main: blueGrey[500],
      dark: blueGrey[700]
    }
  }
});

PD: maybe update the material-u v.3 it`s out Hope it helps

Answer 3

Just upgrade @material-ui/core to v3.0.1. It should work like a charm.