title: Change custom theme Material-UI
body: <p>I am using <a href="https://material-ui.com" rel="noreferrer">Material-UI</a> for a React project. However, I'm not sure as to how to apply a theme globally.</p>
  
  <p>Here I have tried for individual components</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
  import CardCommon from '../../common/card/CardCommon';
  
  import purple from '@material-ui/core/colors/purple';
  import Button from '@material-ui/core/Button';
  
  import { Link } from 'react-router-dom';
  //const primary = red[500]; // #F44336
  import { Paths } from '../../../Routes';
  
  const theme = createMuiTheme({
      palette: {
          primary: { main: purple[500] }, // Purple and green play nicely together.
          secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
      },
  });
  </code></pre>
  
  <p>So how can I change the primary and secondary colors globally?</p>