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

Question

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

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

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

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）

Answer 1

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

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

然后导入

Import { theme } from "app"

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