javascript - 相当于 react 样式中的 ul li

Question

我正在尝试制作 padding在我的 <li>元素等于 0 而不使用 styles=newListStyle .我想在 ul li 的 css 中使用等效的相同语法, 让我的 li元素没有填充。当前代码:

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

Answer 1

你需要为此使用 CSS 模块，并将它们导入到你的 React 组件中，如下所示:

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

然后，在您的 styles.css 文件中，您可以执行如下操作:

ul.list {
  /* styles */
}

ul.list li {
  /* styles */
}

如果您像上面那样使用内联样式，那么您将别无选择，只能单独设置每个元素的样式，并且您将消除在 css 中使用“级联”的可能性。