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

问题描述

是否可以以样式化组件允许的类似方式将样式化 JSS 对象定位到另一个样式化 JSS 对象中？

以下是我所说的样式化组件的示例：

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

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

这在 JSS 中可行吗？

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

解决方法

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

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

更新

是的，我误解了。我认为仅使用 MUI styled API 无法做到这一点？我能得到的最接近的是使用 className 道具（或者您可以在 MUI 组件上使用 classes 道具）

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>

,

在 [] 中使用 & 符号和方括号 JSS 来实现：

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

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