如何在材料UI中应用自定义主题

知道不多

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

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

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

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,
  }
};

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

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”颜色..但是控件文本始终为黑色。所以我的主题不适用。

我的完整代码可从https://github.com/abhitechdojo/MovieLensReact获得。

米克克莱恩

我很确定你需要

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

在你之前

getChildContext()

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

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

这是指向修改后的App.jsx文件要点链接

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

new webpackDevServer(webpack(config), {

new WebpackDevServer(webpack(config), {

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在材料UI中创建每个标签具有多个标签的自定义标签?

如何在 ThemeProvider 的孩子中访问 Material-UI 自定义主题

如何在 zk 8.5 中动态应用我们自己的自定义主题

如何应用自定义主题?

如何在自定义主题Android中更改colorBackground?

如何在实例配置中自定义主题?

如何在Wordpress中自定义主题

如何在magento 1.9中实现自定义主题

创建主题时,如何在整个应用程序中自定义material-ui V1组件?

角材料自定义主题

自定义JSS主题会覆盖材料UI主题吗?

应用自定义主题时,是否可以覆盖 Material UI 中的嵌套对象样式?

如何在Material-UI主题中导入和使用自定义字体?

如何在材料表中使用自定义'editComponent'?

如何在material-ui中自定义DialogTitle

如何在角度材料表中添加自定义列?

如何在附加到 gltf 元素的自定义组件中引用多种材料

如何在聚合函数中应用自定义逻辑

如何在flyway中应用自定义迁移脚本

如何在主题中定义自定义路线?

如何在有角度的材质中定义自定义主题以控制按钮文本的颜色?

如何在Flutter中定义自定义文本主题?

vue中自定义主题datepicker element-ui

我应该如何应用自定义角度材质主题?

UWP应用程序中的自定义主题

如何将内置或自定义主题应用于活动中的片段?

如何使用angular5和angular材料创建自定义颜色主题

如何将自定义主题应用于Google自定义搜索?

角度材料中的自定义主题无法构建