Question

我有以下情况我创建了两个类，对JSS类做出反应这些类彼此嵌套。

为了进一步理解，我将解释整个情况，想想菜单侧边栏，此菜单侧边栏有其列表元素。每个列表元素都有一个图标和一个文本。

父亲类别为 classes.list-item 孩子们将是 classes.icon 和 classes.text

我尝试了一下，因为您可以看到文档中的引号是什么，但是我认为引号不能检测到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时，当我将两个子组件都更改颜色的父组件悬停时，我想执行以下操作。

Answer 1

尝试一下

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

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

Demo和另一个示例。

尝试将React JSS类嵌套在另一个JSS类中？

1 个答案: