如何使用 react-jss 组件为子元素添加样式?

Ato*_*abi 10 reactjs

我正在使用 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)


Oni*_*Oni 8

请参阅以下代码片段。我希望它能帮助你清楚。

parent: {
    textAlign: 'center',
    '& div': {
      padding: 15,
      '&:hover': {
        color: 'yellow',
      }
   }
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

这是 codepen链接。如果父元素的子元素,将有 15px 的填充。如果将鼠标悬停在这些 div 标签上,文本颜色会发生变化。