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

Question

我正在使用react-jss组件。 这是我的示例代码：

vm.$emit('test', 'hi'); 
vm.$on('test', function (msg) { console.log(msg) }); // => "hi"

而我在style.js中的代码是：

<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>

有没有一种方法可以在ul元素中仅添加一个类，并在react-jss组件中为其样式子元素？ 像这样：

const styles = theme => ({
    listStyleNone: {
        listStyle: 'none',
    },
})

Answer 1

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ul style={{ listStyle: "none" }}>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

您可以显示li个没有样式的内容。您可以像这样简单。

     <ul style={{ listStyle: "none" }}>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>

Answer 2

您需要在list-style而不是ul上应用li属性。您可以在此处找到有关该物业的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

因此，您的代码应如下所示：

<ul className={classNames(classes.listStyleNone)}>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

我看到的错误在这里：

.listStyleNone > li {list-style: none;}

应该在哪里

.listStyleNone {list-style: none;}

Answer 3

谢谢， 但是，对于列表样式，它可以工作，但对于其他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';
        }
    },
})

Answer 4

请参见以下代码段。希望对您有帮助。

parent: { textAlign: 'center', '& div': { padding: 15, '&:hover': { color: 'yellow', } } }

这是codepen link。 如果父元素的子元素，则填充为15px。 如果将鼠标悬停在这些div标签上，文本颜色就会更改。