In material ui using makeStyles, is it possible to write a css rule that applies only if the element has both classes?

Question

I know that I can do this in CSS.

.makeStyles-mainNavWrapper-67.sticky{
  position: fixed;
  top: 0px;
  opacity: 1;
  transition: opacity 1s ease;
  padding: 10px;
}

I want to know if I can do this in Material-UI so that I do not have to have two separate stylesheets so to speak (one for the MaterialUI ReactApp and one that is linked in the HTML tag.

const Header = (props) => {
  const useStyles = makeStyles(theme => ({
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%'
    },
    mainNavWrapper: {
      paddingTop: '2%',
      background: 'rgba(0,0,0,0.8)'
    },
    mainNavWrapper.sticky: {
       I know this does not work. Is it possible?
    },

I tried to just string together two classes in MaterialUI and I get errors.

Answer 1

I found the answer. I had to import the react-jss package and follow their documentation. I can now use the jssNested syntax and access nested elements and write rules that only apply if there are two classes attached to the element.

here it is:

import React from 'react'
import { render } from 'react-dom'
// Import React-JSS
import injectSheet from 'react-jss'

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const styles = {
  mainNav: {
    zIndex: '3',
    color: 'white',
    textAlign: 'right',
    marginRight: '10%',
    '& ul': {
      zIndex: '2',
      textAlign: 'right',
      listStyleType: 'none',
      margin: '0px',
    }
  },
  li: {
    '& a': {
      color: 'white'
    }
  },
  mainNavWrapper: {
    paddingTop: '2%',
    background: 'rgba(0,0,0,0.8)',
    width: '100%',
    opacity: '1',
    transition: 'width 2s ease',
    padding: '10px',
    '&.sticky': {
      // jss-nested applies this to a child span
      fontWeight: 'bold' // jss-camel-case turns this into 'font-weight'
    },
    '&.scrolling': {
      opacity: '0',
      position: 'absolute',
      transition: 'opacity 1s ease'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
}

// Define the component using these styles and pass it the 'classes' prop.
// Use this to assign scoped class names.
const Button = ({ classes, children }) => (
  <div className={classes.mainNavWrapper}>

    <nav className={classes.mainNav}>
      <ul className={classes.ul}>
        <li className={classes.li} ><a href="#" >home</a></li>
        <li className={classes.li}><a href="#">about us</a></li>
        <li className={classes.li}><a href="#">packages</a></li>
        <li className={classes.li}><a href="#">reviews</a></li>
        <li className={classes.li}><a href="#" className={classes.current}>contact us</a></li>
      </ul>
    </nav>
  </div>
)

// Finally, inject the stylesheet into the component.
const Test = injectSheet(styles)(Button)

export default Test;