ReactJS 选择所有相似的标签进行样式设置

Posted 2023-03-06

【中文标题】ReactJS 选择所有相似的标签进行样式设置

【英文标题】：ReactJS select all similar tags for styling

【发布时间】：2017-12-16 11:25:34

【问题描述】：

我有一个包含两列的表格，我想设置它们的样式，使第一列的样式为text-align:left，第二列的样式为text-align:right。

我正在声明这样的样式：

const styles = 
    table: 
      width: '100%',
     

表格是这样的：

<table style=styles.table>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
</table>

一种详细的方法是为每一列创建一个样式并将它们包含在每个<td> 中。有什么方法可以一次选择所有 td（单列）？

【参考方案1】：

只需使用伪类。例如：

td:first-child 
  text-align: left;

td:nth-chuld(2)    //You can use :last-child instead of :nth-child(n) in your example
  text-align: right;

如果它不是 react-native，则只需在组件开头使用 import './styles.css' 并使用 className 进行样式设置。像这样：<table className='table'>...</table>。

【讨论】：

不行，我觉得jsx中不允许带连字符的css属性

它是反应原生的吗？为什么使用样式对象？如果它不是 react-native，则只需在组件的开头 import './styles.css' 并使用 className 进行样式设置。像这样：<table className='table'>...</table>。这将允许您使用常规 css 或 sass/scss/less 可能:)