ReactJS + Material Design：如何在组件之外获取主题颜色？答案

【问题标题】：ReactJS + Material Design: How to get theme colors outside component?ReactJS + Material Design：如何在组件之外获取主题颜色？
【发布时间】：2018-09-02 23:57:19
【问题描述】：

在我的 ReactJS app.js 我定义了一个主题：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#54BD40",
        },
    },
});

我正在使用React wrapper for Chart.js，我想设置一个图表。但我不确定如何使用主题中的原色/主色：

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';

let data = []; //data here
const MONTHS = ['Jan', 'Feb', 'Mrt', ...];
const WEEK = ['Sun', 'Mon', 'Tue', ...];

let chart = {
    labels: MONTHS,
    datasets:[{
        borderColor: ['#XXX'], //THEME COLOR HERE
    }],
};

class LineChart extends Component{
    constructor(props){
        super(props);
        this.state = {
            chartData: chart,
            usage: false,
            generation: true,
        }
    }
    render(){
        return (
            <div>
                <Line data={ this.state.chartData } options={} />
            </div>
        )
    }
}

export default LineChart;

为了在render() 中使用主题调色板，我知道我可以导入withTheme() 并使用this.props.theme。但是现在它在组件之外是如何工作的呢？（我刚开始使用 ReactJS）

【问题讨论】：

标签： javascript reactjs themes material-design chart.js

【解决方案1】：

据我了解，您可以在完成后将常量导入您的主 js 文件在 app.js 中导出。例子。 -

export const theme = createMuiTheme({ palette: { primary: { main: "#54BD40", }, }, });

然后导入

Import { theme } from "app"

并在您的主 js 文件中的任何位置使用它。

【讨论】：