有没有办法将嵌套的JSS样式的组件定位在另一个JSS样式的组件中？[JSS-嵌套/样式-JSS/材质UI (React)]

Question

是否可以像样式化组件允许的那样，在另一个样式化JSS对象中以样式化JSS对象为目标？

下面是我所讨论的样式化组件的示例：

const Child = styled.div`
  color: red;
`;

const Parent = styled.div`
  display: flex;
  ${Child}:hover {
    color: blue
  }
`;

这在JSS中是可能的吗？

仅供参考，我使用Material UIv4的样式解决方案，它基于JSS。

Answer 1

您可以将子组件传递给父组件的样式化API。

const Child = styled("div")({
  color: '#fff'
});
const Parent = styled(Child)({
  background: '#999'
})

更新

是的，我误会了。我不认为仅仅使用MUI styled API就可以做到这一点？我能得到的最接近的方法是使用className prop (或者您可以在MUI组件上使用classes prop )

const Parent = styled('div')({
  background: '#999',
  '& .warning': {
    '&:hover': {
      color: 'goldenrod'
    }
  },
  '& .error': {
    '&:hover': {
      color: 'red'
    }
  }
})

<Parent>
  <Child className="warning">Warning!</Child>
  <Child className="error">Error!</Child>
</Parent>

Answer 2

在JSS中使用&与符号和方括号[]来完成此操作

const Child = styled(div)({
  color: 'red',
});

const Parent = styled(div)({
  display: 'flex',
  [`& ${Child}:hover`]: {
    color: 'blue'
  }
});