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

user_6944881 0
Viewed 29885

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;}
reactjs
4 Answers

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';
        }
    },
})
user_69448810

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

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

enter image description here

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.

user_102236030 

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>

You can display lis without styles. you can make it simple like this.

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

You need to apply the list-style property on ul rather than li. You can find more info about the property here: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

Therefore, your code should look something like this:

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

The error I see is here:

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

Where is should have been:

.listStyleNone {list-style: none;}
user_17695190
Related