如何在材料UI中应用自定义主题 [英] How to apply custom theme in material ui

问题描述

阅读本教程后，我试图将自定义主题应用于我的React组件

I am trying to apply a custom theme to my React component after reading this tutorial

http://www.material-ui.com/#/customization/themes

我在这样的单独的javascript文件中写了主题

I wrote my theme in a separate javascript file like this

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
  spacing: Spacing,
  zIndex: zIndex,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.cyan500,
    primary2Color: Colors.cyan700,
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.pinkA200,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.deepPurpleA700,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
    pickerHeaderColor: Colors.cyan500,
  }
};

我按照以下方式将此主题应用于我的组件

I apply this theme to my component in the follow way

import React from 'react';
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import MyTheme from './theme.js';

injectTapEventPlugin();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            messages : [{id: 1, text: 'Hi'}, {id: 2, text: 'Hello'}]
        };
    }

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MyTheme)
        };
    }

    componentWillMount() {
        let newMuiTheme = this.state.muiTheme;
        this.setState({
            muiTheme: newMuiTheme,
        });     
    }

    render() {

        var messageNodes = this.state.messages.map((message) => {
            return (<div key={message.id}>{message.text}</div>);
        });
        return (<div>{messageNodes}</div>);
    }
}

App.childContextTypes = {
    muiTheme: React.PropTypes.object
};

export default App;

根据我的主题呈现控件时的主题，其颜色应为"deepPurpleA700" ..但是我的控件文本始终为黑色.所以我的主题没有应用.

According to my theme when my control renders it should have a "deepPurpleA700" color .... but my control text is always black. So my theme is not applied.

我的完整代码可在 https://github.com/abhitechdojo/MovieLensReact

推荐答案

我很确定您需要拥有

static childContextTypes = {
  muiTheme: React.PropTypes.object,
};

在您的

getChildContext()

方法.完成后，您应该可以从中删除任何与主题相关的内容 componentWillMount()

method. Once that is done you should be able to remove any theme related stuff from componentWillMount()

现在，这不适用于基本文本.但我可以确认正在应用该主题.我通过添加appBar组件并更改theme.js文件中的颜色进行了测试.我还添加了一个带有ListItems的列表，而该文本样式正是您所要的.

Now, this won't work for base text. But I can confirm that the theme is being applied. I tested it by adding an appBar component and changing the color in your theme.js file. I also added a List with ListItems and that text style is what you are looking for.

这里是修改的App.jsx文件的要点的链接.

Here is a link to the gist of your modified App.jsx file.

此外，作为server.js中的补充说明，您在第5行上有一个小错字，应该有

Also, as a side note in you server.js you have a small typo on line 5 you should have

new webpackDevServer(webpack(config), {

不是

new WebpackDevServer(webpack(config), {

这篇关于如何在材料UI中应用自定义主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！