title: ReactJS + Material Design: How to get theme colors outside component?
body: <p>In my ReactJS <code>app.js</code> I defined a theme:</p>
  
  <pre><code>const theme = createMuiTheme({
      palette: {
          primary: {
              main: "#54BD40",
          },
      },
  });
  </code></pre>
  
  <p>I am using the <a href="https://github.com/jerairrest/react-chartjs-2" rel="nofollow noreferrer">React wrapper for Chart.js</a> and I want to set-up a chart graph. But I am not sure how I can use the primary/main color from my theme:</p>
  
  <pre><code>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 (
              &lt;div&gt;
                  &lt;Line data={ this.state.chartData } options={} /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default LineChart;
  </code></pre>
  
  <p>For using theme palettes inside <code>render()</code>, I know I can import <code>withTheme()</code> and use <code>this.props.theme</code>. But how this work now outside the component? (I just started using ReactJS)</p>