title: Custom components based on Material UI and React
body: <p>I've been using Material UI components to create my own custom reusable components package. Here is an example of custom component located in package, just for demo purpose:</p>
  
  <pre><code>import PropTypes from 'prop-types';
  import {makeStyles, ThemeProvider} from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  
  const useStyles = makeStyles({
      'buttonPackage': {
          backgroundColor: theme.palette.primary.main,
          color: 'rgba(12, 0, 0, 1)',
          minWidth: '147px',
          padding: '8px 8px 9px 8px',
      },
  });
  
  const CustomButton = ({children, theme}) =&gt; {
      const classes = useStyles();
  
      return (
          &lt;ThemeProvider theme={theme}&gt;
              &lt;Button className={classes.buttonPackage}&gt;
                  {children}
              &lt;/Button&gt;
          &lt;/ThemeProvider&gt;
      );
  };
  
  export default CustomButton;
  </code></pre>
  
  <p>If it is not wrapped in ThemeProvider, global theme variables are not applied to custom component, although whole app is wrapped in ThemeProvider.</p>
  
  <p>The problem occurs when I try to do further customization in React app part, for components that have very specific styling and cannot be considered as reusable. Here is an example of React view component, containing both custom component from package and component that is customized inside view component, again, this is just a demo code:</p>
  
  <pre><code>import React from 'react';
  import {makeStyles} from '@material-ui/core/styles';
  import {Button} from '@material-ui/core';
  import {CustomButton, theme} from '@name-of-my-package/ui-components';
  
  const useStyles = makeStyles(theme =&gt; ({
      buttonApp: {
          height: '100%',
      },
  }));
  
  const GenericView = () =&gt; {
      const classes = useStyles();
  
      return (
          &lt;React.Fragment&gt;
              &lt;CustomButton theme={theme}&gt;Button imported from package&lt;/CustomButton&gt;
              &lt;Button className={classes.buttonApp}/&gt;Button customized in app&lt;/Button&gt;
          &lt;/React.Fragment&gt;
      );
  };
  
  export default GenericView;
  
  </code></pre>
  
  <p>When used in development, everything works fine. When used in production, some styling properties are shared between components customized in package and react app. Valid classes are bundled, but are not applied on first load of the page. When you click around the application (example, change route from navigation component), valid styles are applied and everything looks OK. I noticed that there is style overlapping between  component customized in reusable component package, and  component that is customized in React app.</p>
  
  <p>Is this approach even possible, having custom component package and do further customization in app part, including Themes?</p>
  
  <p><strong>UPDATE 16.06.2020.</strong> : for now, solution is to completely not use JSS styling in app part of the project. JSS styling classes made in app part of the project overlap with names of JSS styling classes made in reusable components package and that causes the issue.</p>