gpt4 book ai didi

reactjs - JSS - 如何设置嵌套子项的样式?

转载 作者:行者123 更新时间:2023-12-04 14:41:04 26 4
gpt4 key购买 nike

我有一个列表,想从父级设置列表项的嵌套元素的样式。如何访问嵌套元素?下面的代码不起作用。

react js标记

<ul classname={classes.list}>
<li>
<span className={classes.box}> my box </span>
</li>
<li>
<span className={classes.box}>second box </span>
</li>
</ul>

JSS
const styles = () => ({
box: {
background: 'red',
},
list: {
listStyle: "none",

"li": {
"&:first-child": {
"& $box": {
color: 'red',
border: 'solid',
}
}
}
},

最佳答案

您的状态有细微变化 defining your styles object这可以让您的代码运行。对于嵌套元素,您需要 将 & 和类名或 dom 项分开space
工作作风对象:

const styles = () => ({
box: {
background: 'red',
},
list: {
listStyle: "none",
'& li': {
'&:first-child': {
'& $box': {
border: 'solid',
}
}

}
}
})

working demo

关于reactjs - JSS - 如何设置嵌套子项的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54787382/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com