我的工具栏显示的是紫色的颜色是正确的,但文字是黑色的,所以它是不可读的。我的理解是,文本的颜色应该根据它在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中的所有内容都应该接收我链接的自定义样式设置。