如何解决有没有办法在另一个 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'
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。