Equivalent to ul li in react styling

Question

I am trying to make the padding on my <li> element equal 0 without using styles=newListStyle . I would like to use the the equivalent of the same syntax in css of ul li , to make my li element have no padding. Current code:

listOne: {
  width: '50%',
  float: 'left',
  fontSize: '30px',
  color: theme.colour.lightGrey,
  marginTop: '0',
  fontStyle: 'normal',
  fontStretch: 'normal',
  textAlign: 'left'
},

Answer 1

You will need to use CSS modules for this, and import them into your react component like this:

import React from 'react';
import styles from './styles.css';

class Thing extends React.Component {
  render() {
    return (
      <ul className={styles.list}>
        <li>item</li>
        <li>item</li>
      </ul>
    );
  }
}

Then, in your styles.css file, you can do something like this:

ul.list {
  /* styles */
}

ul.list li {
  /* styles */
}

If you use inline styles like you did above, then you'll have no choice but to style each element separately, and you'll eliminate the possibility of using "cascading" in css.

Answer 2

There's no concept of selectors with inline styles. Styles can only be applied to a single element.

let listStyles = { ... };
let itemStyles = { padding: 0 };

<ul styles={listStyles}>
  <li styles={itemStyles} />
</ul>

There are some rules which will be inherited by children, such as color and font, but rules like padding must be specified explicitly.