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

Question

我有以下情况我创建了两个 classes react JSS classes 这个 class 一个嵌套在另一个里面。

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

父亲 class 将是 classes.list-item 儿童将是 classes.icon 和 classes.text

我试过了，你可以看到文档中引用的内容，但我认为引号没有检测到 JSS class，也尝试过使用“。”或者在 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;
}

现在，当悬停父组件时，我正在尝试使用 JSS 执行以下操作，两个子组件都会改变颜色。

Answer 1

试试这个，

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

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

Demo再举个例子

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

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

nested

jss