material-ui createMuiTheme 调色板类型深色不会将文本颜色更改为浅色答案

【问题标题】：material-ui createMuiTheme palette type dark does not change textcolor to lightmaterial-ui createMuiTheme 调色板类型深色不会将文本颜色更改为浅色
【发布时间】：2019-02-03 15:51:47
【问题描述】：

我在 createMuiTheme 中设置了调色板类型：dark，它将背景颜色更改为深色，这很好。但文本颜色保持黑色。不应该适应浅一点的颜色吗？

代码沙盒链接：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'));

应用组件只包含一个 AppBar 和简单的文本。

更新：我之前提到的material-ui版本，v1不正确。很抱歉误传，现在是 3.10.10

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

然后你需要导入正确的颜色：

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：可能会更新材料-u v.3 它已经出希望对你有帮助

【讨论】：

感谢@FizzVR，为了帮助，我尝试了带有和不带有属性类型的sn-p：dark。这似乎没有帮助。

【解决方案2】：

只需将@material-ui/core 升级到v3.0.1。它应该像一个魅力。

【讨论】：

当前版本为 3.10.10。这似乎没有帮助。我错过了一些基本的东西希望很快能找到:)

【解决方案3】：

您只是误解了 CssBaseline 的用途。该组件是某种 CSS 重置器，不添加任何视觉样式 - 仅添加布局、盒子大小等内容。

你真正想要的是Typography component。

请参阅updated and working CodeSandbox。

【讨论】：

这解决了您的问题吗？如果是这样，你可以接受它:)
在您的沙箱中，您还可以配置主要和次要调色板。我问为什么如果你以后不使用它们？这很令人困惑，仍然不清楚如何配置浅色和深色主题类型。
@Onkeltem 我链接的 CodeSandbox 是原始的一个分支，并从它继承了所有代码。我将更改减少到最低限度以帮助原始海报。这个问题也不是关于深色/浅色调色板，而是如何使用排版组件。