title: How do I share context between a library component, and my application component?
body: <p>I'm using lerna to create a monorepo where I'd have a structure like this: </p>
  
  <pre><code>root 
    packages
      application - Our root application 
      components  - Just some react components, that are to be used by the application
  </code></pre>
  
  <p>Here is <a href="https://github.com/dwjohnston/material-ui-hooks-issue/tree/feature/theme-issue" rel="noreferrer">a working Github with a simple example for this</a>. </p>
  
  <p>The issue I've run into, is I'm using Material-UI and its theming functionality, where at the application root we'll have a ThemeProvider: </p>
  
  <pre><code>import { ThemeProvider } from '@material-ui/styles';
  //...
  
  function App() {
    return (
  
    &lt;ThemeProvider theme={theme}&gt;
            &lt;MyMaterialComponent/&gt;
    &lt;/ThemeProvider&gt;
    );
  }
  </code></pre>
  
  <p>And later in the library component, we consume the theme, in our case using the <code>makeStyles</code> hook. </p>
  
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/styles';
  import Card from "@material-ui/core/Card";
  
  const useStyles = makeStyles(theme =&gt; {
      console.log(theme); //When this component doesn't have access to the theme, this is `{}`
      return {
          root: {
              //color: theme.palette.primary.main  //will error
          }
      }
  });
  
  export function MyMaterialComponent({ }) {
      const classes = useStyles();
      return (&lt;Card&gt;
              &lt;span className={classes.root}&gt;This is some component&lt;/span&gt;
          &lt;/Card&gt;
      );
  
  }
  </code></pre>
  
  <p>Now this seems all pretty straight forward. When we run this code all within the same package, it works fine. That styles function has access to the theme. </p>
  
  <p>But when I'm running from another package (our application package), the the component library no longer has access to the theme (the theme is just an empty object). </p>
  
  <p>The only way I currently know how to solve this, is the same way I've solved a similar hooks issue, which is to setup a webpack alias configuration in my application, to direct the component library to share the same same node module. (<a href="https://github.com/facebook/react/issues/13991#issuecomment-435587809" rel="noreferrer">See this Github thread and the suggested solution</a>). </p>
  
  <p>ie. using react-app-rewired and customize-cra I have a config-overrides.js that looks like this: </p>
  
  <pre><code>const {
      override,
      addWebpackAlias,
    } = require("customize-cra");
  
  const path = require('path'); 
  
  module.exports = override( 
      addWebpackAlias({
          react: path.resolve('./node_modules/react'), 
          //comment out the line below to reproduce the issue
          "@material-ui/styles": path.resolve("./node_modules/@material-ui/styles") 
      })
  )
  </code></pre>
  
  <p>or you could be managing your webpack manually to do a similar thing. </p>
  
  <p>So this works fine, but this isn't a particularly satisfying solution. </p>
  
  <p>Especially for a library like Material-UI, you want users to be able to use your component library without having them to mess with their webpack configuration. </p>
  
  <p>So I figure I must be doing something wrong here - can you tell me what? </p>