title: How to combine a regular JSS class with Material-UI's classes override feature using classnames
body: <p>I'm trying to assign multiple classes to an element in React, using the <a href="https://github.com/JedWatson/classnames" rel="nofollow noreferrer">classnames</a> package, along with Material-UI's <a href="https://material-ui-next.com/customization/overrides/#overriding-with-classes" rel="nofollow noreferrer">"overriding with classes"</a> approach.</p>
  
  <p><a href="https://material-ui-next.com/demos/drawers/#persistent-drawer" rel="nofollow noreferrer">Here</a> is an example from MUI's documentation where they use classnames to assign multiple classes to an element (expand to see the source code in the example).</p>
  
  <p>What I'm trying to do is combine one regular class I have created with JSS, and one that needs to override the MUI class. Here are the classes:</p>
  
  <pre><code>const styles = {
      insetListItemText: { // This will be used to target MUI's class
          '&amp;:first-child': {
              paddingLeft: '1em',
          },
      },
      link: { // This is just a normal JSS class
          textDecoration: 'underline',
          textDecorationColor: '#ccc',
      },
  }
  </code></pre>
  
  <p>Here I'm attempting to use classnames to apply both of these classes:</p>
  
  <pre><code>// import classNames from 'classnames'
  &lt;ListItemText
      inset
      classes={
          classNames({
              inset: classes.insetListItemText,
              [classes.link]: true
          })
      }
  &gt;
      List item text
  &lt;/ListItemText&gt;
  </code></pre>
  
  <p>I'm just having trouble figuring out how to combine the two methodologies syntactically. Any ideas?!</p>