为什么在此材质UI工具栏中我的文字颜色不是白色?

时间:2017-12-26 01:28:02

标签: javascript reactjs material-ui

我的工具栏显示的是紫色的颜色是正确的,但文字是黑色的,所以它是不可读的。我的理解是,文本的颜色应该根据它在Material-UI中的背景颜色而改变。也许我真的误解了如何使用它,但希望你能为我解决这个问题。

这是我正在使用的组件。

import React from 'react';
import Toolbar from 'material-ui/Toolbar';
import ToolbarGroup from 'material-ui/Toolbar/ToolbarGroup';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import customTheme from '../UIThemes';
class NavBar extends React.Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(customTheme)}>
        <div>
          <Toolbar className="mdc-toolbar--fixed">
            <ToolbarGroup>
              Am I white?
            </ToolbarGroup>
            <ToolbarGroup>
              Two
            </ToolbarGroup>
            <ToolbarGroup>
            Three
            </ToolbarGroup>
          </Toolbar>
        </div>
      </MuiThemeProvider>

    );
  }
}

export default NavBar;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是我根据网站上关于主题制作方式的材料制作自定义的主题。

import {
  fullWhite,
} from 'material-ui/styles/colors';
import { fade } from 'material-ui/utils/colorManipulator';
import spacing from 'material-ui/styles/spacing';

export default {
  spacing,
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  palette: {
    primary1Color: '#3f51b5',
    primary2Color: '#002984',
    primary3Color: '#757de8',
    accent1Color: '#673ab7',
    accent2Color: '#320b86',
    accent3Color: '#9a67ea',
    textColor: '#FFFFFF',
    secondaryTextColor: fade(fullWhite, 0.7),
    alternateTextColor: '#303030',
    canvasColor: '#303030',
    borderColor: fade(fullWhite, 0.3),
    disabledColor: fade(fullWhite, 0.3),
    pickerHeaderColor: fade(fullWhite, 0.12),
    clockCircleColor: fade(fullWhite, 0.12),
  },
};

我对材料ui不熟悉,并且正在使用纱线添加材料-ui,如果这有任何区别的话。

有没有人知道为什么工具栏组内的文字颜色没有变成白色,或者我真的错过了什么?我假设包含在MuiThemeProvider中的所有内容都应该接收我链接的自定义样式设置。

0 个答案:

没有答案
相关问题