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模块，并将它们导入反应组件，如下所示：

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 */
}

如果你像上面那样使用内联样式，那么你别无选择，只能分别设置每个元素的样式，并且你将消除使用＆＃34;级联＆＃34;的可能性。在css。

Answer 2

没有内联样式的选择器概念。样式只能应用于单个元素。

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

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

有一些规则将由子项继承，例如颜色和字体，但必须明确指定填充等规则。

反应造型中相当于ul li

2 个答案: