title: CSS in JS, how to make props.className the priority class
body: <p>We need components where the class passed as props should have more priority than the default class.</p>
  
  <blockquote>
    <p>When passing classes as a prop, the component gives priority to the
    class created in his own file.</p>
  </blockquote>
  
  <p><strong>Text.jsx</strong></p>
  
  <pre><code>// this will be a component in another folder, it will be used in the whole app so it 
  // should haveDYNAMIC styling
  function Text(props) {
    const useStyles = makeStyles(theme =&gt; ({
      default: {
        fontSize: 18,
        color: "black"
      }
    }));
  
    const classes = useStyles();
  
    return (
      &lt;div className={classNames(classes.default, props.className)}&gt;
        {props.children}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>function App() {
    const useStyles = makeStyles(theme =&gt; ({
      title: {
        fontSize: 80,
        color: "red"
      },
      notGoodPractice: {
        fontSize: "80px !important"
      }
    }));
    const classes = useStyles();
  
    return (
      &lt;div className="App"&gt;
        &lt;Text className={classes.title}&gt;Text in here is 18px&lt;/Text&gt;
        &lt;Text className={classes.notGoodPractice}&gt;
          Text in here is 80px
        &lt;/Text&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>React Snippet => <a href="https://codesandbox.io/s/cranky-yalow-39vdz?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">CodeSandBox</a></p>