我有一个列表,并希望从父级设置列表项的嵌套元素。我如何访问嵌套元素?下面的代码不起作用。
反应js标记
<ul classname={classes.list}>
<li>
<span className={classes.box}> my box </span>
</li>
<li>
<span className={classes.box}>second box </span>
</li>
</ul>
玩笑
const styles = () => ({
box: {
background: 'red',
},
list: {
listStyle: "none",
"li": {
"&:first-child": {
"& $box": {
color: 'red',
border: 'solid',
}
}
}
},
defining your styles object
如何让你的代码运行有一些细微的变化。对于嵌套元素,您需要通过space
分隔&和classname或dom项目
工作方式对象:
const styles = () => ({
box: {
background: 'red',
},
list: {
listStyle: "none",
'& li': {
'&:first-child': {
'& $box': {
border: 'solid',
}
}
}
}
})
我希望这有帮助:
玩笑
list: {
listStyle: "none",
'& li:first-child $box': {
background: 'blue'
}
}
你有一点打字错误。它应该是“className”,大写字母为“N”。
问候