我正在使用 react-jss 组件。这是我的示例代码:
<ul>
<li className={classNames(classes.listStyleNone)}>Item 1</li>
<li className={classNames(classes.listStyleNone)}>Item 2</li>
<li className={classNames(classes.listStyleNone)}>Item 3</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我在 style.js 中的代码是:
const styles = theme => ({
listStyleNone: {
listStyle: 'none',
},
})
Run Code Online (Sandbox Code Playgroud)
有没有办法我只向 ul 元素添加一个类,并在 react-jss 组件中为它的子元素设置样式?像这样:
.listStyleNone > li {list-style: none;}
Run Code Online (Sandbox Code Playgroud)
Ato*_*abi 12
谢谢大家,但是对于列表样式,它可以工作,但对于其他 css,例如 padding: 10px; 它不是。所以这里有一个更好的方法:
<ul className={classNames(classes.listStyleNone)}>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
const styles = theme => ({
listStyleNone: {
'& li':{
listStyle: 'none';
}
},
})
Run Code Online (Sandbox Code Playgroud)
请参阅以下代码片段。我希望它能帮助你清楚。
parent: {
textAlign: 'center',
'& div': {
padding: 15,
'&:hover': {
color: 'yellow',
}
}
}
Run Code Online (Sandbox Code Playgroud)
这是 codepen链接。如果父元素的子元素,将有 15px 的填充。如果将鼠标悬停在这些 div 标签上,文本颜色会发生变化。
| 归档时间: |
|
| 查看次数: |
18326 次 |
| 最近记录: |