CODEWITHSUNDEEP
nestedjss
Marcos Collado
Marcos Collado

Reputation: 41

Attempt to Nesting a React JSS class in another JSS class?

I have the following situation I create two classes react JSS classes this classes are nested one inside the other.

for further understanding I will explain the whole situation, think of a menu-sidebar, this menu-sidebar has its list elements. each list element has an icon and a text.

Father class would be the classes.list-item childrens would be classes.icon and classes.text

I tried as you can see what the documentation says with the quotation, but I think the quotes don't detect the JSS class, also tried using "." or not using it before the class.

export default menuItems => ({
  root: {
    width: '100%',
    display: 'flex'
  },
  listItems: {
    '&:focus': {
      background: '#549be6'
    },
    '&:hover': {
      background: 'red',
      fontWeight: 'bold'
    },
    '& .icon': {
      color: '#549be6'
    }
    '& text':{
      color: '#549be6'
    }
  }
});

//CSS wise what I attempt to do is the following

.listItems:hover .icon{
  color:red;
}

.listItems:hover .text{
  color:red;
}

Now with JSS am trying to do the following I want when hovering the father component that both children components change color.

Upvotes: 0

Views: 1650

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

Try this,

listItems: {
    ...
    '&:hover': {
      background: 'red',
      fontWeight: 'bold',

      '& .icon': {
        color: 'red'
      }
      '& .text':{
        color: 'red'
      } 
    },
    '& .icon': {
      color: '#549be6'
    }
    '& .text':{
      color: '#549be6'
    }
  }

Demo with another example.

Upvotes: 1

Related Questions