How add style for child elements with react-jss component?

Question

I'm using react-jss component. Here's my sample code:

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

and my code in style.js is:

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

Is there a way I add just a class to ul element and style it's children elements with that in react-jss component? like this:

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

Answer 1

Thanks all, However for list-style it's working but for other css like padding: 10px; it's not. So here's a better way:

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

Please see following code snippet. I hope it will help you clearly.

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

Here is the codepen link. If child elements of parent, will have a padding with 15px. If you hover those div tags, text color changes.