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

Posted 2023-02-22

【中文标题】ReactJS + Material Design：如何在组件之外获取主题颜色？

【英文标题】：ReactJS + Material Design: How to get theme colors outside component?

【发布时间】：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）

【参考方案1】：

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

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

然后导入

Import  theme  from "app"

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