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

23,461

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

Solution 2

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.

Solution 3

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

Solution 4

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>
Share:
23,461

Related videos on Youtube

Atousa Darabi
Author by

Atousa Darabi

Updated on November 03, 2022

Comments

  • Atousa Darabi
    Atousa Darabi over 1 year

    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;}
    
  • Ashish Sharma
    Ashish Sharma about 3 years
    If you are using React 16.8 or greater then I will suggested to use styled-components.com (styled-components) which makes easy to use expression between css and all these things are easily doable in that.

Related