Question

我已经在组件中实现了一个表：

  <table className={classes.vehicleStatusTable}>
    <thead>
      <tr>
        <th>MILEAGE</th>
        <th>TREAD <FontAwesomeIcon icon={faEye}/></th>
        <th>PRESSURE <FontAwesomeIcon icon={faEye}/></th>
        <th>CLEAN</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span className={classes.unknown}>Unknown</span></td>
        <td><HealthDot value={0} healthRange={null} size='large' /></td>
        <td><HealthDot value={0} healthRange={null} size='large' /></td>
        <td><HealthDot value={0} healthRange={null} size='large' /></td>
      </tr>
    </tbody>
  </table>

这是我的样式文件中适用的样式：

  vehicleStatusTable: {
    width: '600px',
    '& thead': {
      '& tr': {
        '& th': {
          fontWeight: 'normal',
          textAlign: 'center'
        }
      }
    },
    '& tbody': {
      '& tr': {
        '& td': {
          textAlign: 'center'
        }
      }
    }    
  }

除第一个列外，“中心”对齐适用于所有列。

我尝试了几种不同的方法来强制将第一列的对齐方式设置为left，但没有任何效果。有什么想法可以解决这个问题吗？

Answer 1

为什么不将类添加到第一列的每个第一元素？

或尝试使用CSS :nth-child() Selector

使用公式（an + b）。说明：a表示一个循环大小，n是一个计数器（从0开始），b是一个偏移值。

在这里，我们为所有索引为3的倍数的p个元素指定背景色。

p:nth-child(3n+0) {
  background: red;
}

您可以在这些stackoverflow问题和答案中看到人们如何使用此类选择器

How to use pseudo selectors in material-ui?

How to get first child to work with JSS-Nested

Answer 2

解决方案非常简单。这是一个示例：

<td style={{textAlign: 'left'}}

如何使用ReactJSS覆盖默认样式？

2 个答案: