Handle multiple className in makeStyle() - ReactJS

Question

I'm trying to handle multiple className(s) to customize the style of the HTML element, but i don't understand how I can replicate the situation .class1.class2 (css) with the makeStyle method of React.

The situation is pretty simple, I've some blocks with className slide and one of them will always be active (so className=({classes.slide: true}, {classes.active: true})

In css I would've defined in such a way:

.slide {
  <some styles>
}

.slide.active {
  <some other styles>
}

Can i do something similar with makeStyle() or should I replace {classes.active: true} with {classes.activeSlide: true} and handle the situation like the following:

slide: {
  <some styles>
},

activeSlide: {
  <some other slide>
},

Answer 1

:active is a pseudo class. makestyles provides the solution for all psuedo classes as follows:

const useStyles = makeStyles(theme => ({
 slide: {
  color: '#000',

  '&:active': {
   color: '#fff'
  }
 }
)})

Also, when using makeStyles you have to call const classes = useStyles() to get access to use the class names like classes.slide as the value of the className attribute in any jsx/html element in the render method.

EDIT/UPDATE:

In material ui makeStyles method, You want to write a common style rule for multiple classes when an element has both the classes attributed to it. So, for material ui makeStyles method, you can define multiple classes inside makeStyles like:

const useStyles = makeStyles(theme => ({
 class1: {
  marginTop: 100,
 },
 class2: {}
}))

Also attach them to the element using template literal like:

<div className={`${classes.class1} ${classes.class2}`}>

Now, to make class1 and class2 work as a combination we can do this:

const useStyles = makeStyles(theme => ({
 class1: {
  marginTop: 100,

  '&$class2': {
   color: 'red'
  }

 },
 class2: {}
}))

so even if class2 is not required in isolation, we need to define a dummy object so that we can have access to it when required inside render using classes.class2 and if required you can add styles to it which will work as any other className.

Also, found a documentation reference to this here .

Answer 2

You can access your current classname inside its value object using the '&' character. Here is how it would look like in your case:

const classes = {
  slide: {
    backgroundColor: 'teal',

    '&.active': {
       backgroundColor: 'gold'
     }

  }
}