title: How can I pass my custom theme from a react project with material-ui to an equal one but that only has reusable components transpiled with roll-up?
body: <p>I want to reuse components of a react project that are transpiled with roll-up. Each of the components have the "makeStyles" function of material-ui to be customized from where they are called.</p>
  
  <p>I currently have a project and I want to use these components, but despite the fact that I include ThemeProvider, I am not reading properties such as color palettes, and use the one with the default material-ui.</p>
  
  <p>I have the reusable component project at the root of the new project. I added it as a local dependency, and then I do a test including some of the reusable components like the button.</p>
  
  <p>It renders me well, even with the properties that happened to it, the reusable component (button) reads them to me and it works. But it doesn't use any of the custom properties of the theme.</p>
  
  <p>Código del botón (Commons Project)</p>
  
  <pre><code>const useStyles = makeStyles( theme =&gt; {
    console.log(theme); // &lt;-- no theme custom variables
    return {
      root: {
        width: '100%',
      },
    };
  });
  
  
  const Button = (props) =&gt; {
      const { title, outlined, theme, color } = props;
      const classes = useStyles(props);
  
      return (
          &lt;Button variant="contained"               
                  {...props}&gt;
              { title }
          &lt;/Button&gt;
      );
  };
  </code></pre>
  
  <p>Código que llama al botón (New Project)</p>
  
  <pre><code>import React, { useState } from 'react';
  import { ThemeProvider} from '@material-ui/styles';
  import { Button} from 'commons-lib';
  import theme from './theme';
  
  function App() {
    return (
      &lt;ThemeProvider theme={theme}&gt;
      &lt;div className="App"&gt;
        &lt;Button id="btn12" color="primary" title="Aceptar" size="medium" /&gt;
      &lt;/div&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>code theme</p>
  
  <pre><code>const theme = createMuiTheme({
      palette: {
          primary: purple,
          secondary: {
              light:'#b1b',
              main:'#066',
              dark:'#838',
              contrastText: '#fff'
          }
      }
    },
  });
  
  export default theme;
  </code></pre>
  
  <p>It is not using the palette that I defined, but it is using the default palette. From the console I can see that the themeprovider properties are correct, but in the button console.log the default palette appears.</p>
  
  <p>I want you to use the palette that is being injected from the new project.</p>