Попытка вложения класса React JSS в другой класс JSS? - PullRequest
Новая
       19

Попытка вложения класса React JSS в другой класс JSS?

0 голосов
/ 21 июня 2019

У меня следующая ситуация: я создаю два класса, реагирующих на классы JSS, эти классы вложены друг в друга.

для дальнейшего понимания я объясню всю ситуацию, подумайте о боковой панели меню, это менюБоковая панель имеет свои элементы списка.каждый элемент списка имеет значок и текст.

Класс отца будет classes.list-item , потомками будут classes.icon и классов.текст

Я пытался, как вы можете видеть, что в документации говорится с цитатой, но я думаю, что в кавычках не определен класс JSS, также пытался использовать "."или не использовать его перед классом. 

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;
}

Теперь с JSS я пытаюсь сделать следующее, что я хочу, когда при наведении курсора на родительский компонент оба компонента изменяют цвет.

1 Ответ

0 голосов
/ 21 июня 2019

Попробуйте это, 

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

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

Демо с другим примером.

...