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

Posted 2023-03-16

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

【英文标题】：Is there a way to target a nested JSS styled component within another JSS styled component? [JSS-nested/Styled-JSS/Material UI (React)]

【发布时间】：2021-05-09 08:11:52

【问题描述】：

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

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

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

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

这在 JSS 中可行吗？

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

【问题讨论】：

我可能弄错了，但我认为您不能将反引号与 MUI 的样式 api 一起使用

@Barryman9000 我给出的代码示例不是用 JSS/MUI 的样式化 api 编写的。它使用样式化组件来说明我想用 JSS/MUI 的样式化 api 完成什么。

【参考方案1】：

您可以将您的子组件传递给父组件的样式化 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>

【讨论】：

感谢您的建议，但我正在寻找一种方法来定位可在“父级”中找到的“子级”嵌套实例。除非我遗漏了什么，否则您给出的示例似乎是创建一个名为“Parent”的“Child”样式版本。

【参考方案2】：

在 JSS 中使用 & 和括号以及括号 [] 来实现：

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

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