React表格CSS样式不生效，如何正确设置表格组件样式

看起来你的问题主要出在CSS选择器写法错误、React的class属性误用，以及CSS属性不完整这几个方面，另外样式优先级的冲突也导致自定义样式被现有.table样式覆盖。下面一步步帮你解决：

1. 修正CSS选择器的核心错误 #

你当前的CSS选择器用了后代选择器（比如.table .slb-table），这意味着它会匹配拥有.table类的元素内部的.slb-table元素，但你的表格本身是直接带有.slb-table类的（如果表格同时使用了.table类，应该用交集选择器），并非嵌套在.table元素里。

另外，你的border属性缺少样式值（比如solid），这也是边框不显示的原因。

修改后的CSS示例：

/* 同时拥有.table和slb-table类的表格，优先级高于单个.table */
.table.slb-table {
  background-color: #0004ff;
  /* 补充border的样式值，否则边框无法生效 */
  border: 10px solid black;
}

/* 选中slb-table下的slb-tbody */
.table.slb-table .slb-tbody {
  background-color: #0004ff;
  border: 10px solid black;
}

/* 如果不需要依赖.table类，直接用.slb-table也可以，确保优先级足够 */
.slb-table .slb-thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  /* 若要覆盖HTML内联的bgcolor，可使用!important或更具体的选择器 */
  background-color: red;
  color: white;
}

.slb-table .slb-tbody td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

2. 修正React中的class属性为className #

在React中，HTML原生的class属性必须写成className，否则React不会识别这个类名，导致CSS无法选中对应的元素。你代码里的两处需要修改：

• <thead class="slb-thead"> → <thead className="slb-thead">
• <tr class="slb-tr" key={row-${row_key}}> → <tr className="slb-tr" key={row-${row_key}}>

修改后的React组件片段：

tableData = () => {
  return this.props.sbranch.map((row, row_key) => {
    return (
      // 修正class为className
      <tr className="slb-tr" key={`row-${row_key}`}>
        {this.tableHeader().map((value, key) => {
          if (value === 'invoice_val' || value === 'invoice_val_net' || value === 'profit_margin_val') {
            return (
              <td scope="col" className="align-middle" key={`data-${key}`}>{`£ ${row[value]}`}</td>
            )
          } else if (value === 'profit_margin_percent' || value === 'return_rate') {
            return (
              <td scope="col" className="align-middle" key={`data-${key}`}>{`${row[value]} %`}</td>
            )
          } else {
            return (
              <td scope="col" className="align-middle" key={`data-${key}`}>{row[value]}</td>
            )
          }
        })}
      </tr>
    )
  })
}
render() {
  return (
    {/* 如果需要同时使用Bootstrap的.table和自定义类，这里添加table类 */}
    <table className="table slb-table">
      {/* 修正class为className */}
      <thead className="slb-thead">
        {/* 建议去掉bgcolor，用CSS统一控制样式，避免优先级冲突 */}
        <tr className="text-white" >
          {this.tableHeader().map((name, key) => (
            <th scope="col" className="align-middle" key={name}>{name}</th>
          ))}
        </tr>
      </thead>
      <tbody className="slb-tbody">
        {this.tableData()}
      </tbody>
    </table>
  )
}

3. 处理样式优先级冲突 #

• 你HTML里的bgcolor="red"是内联属性，优先级远高于CSS类，所以建议直接去掉这个内联属性，改用CSS控制表头背景色，避免不必要的优先级冲突。
• 如果你使用了Bootstrap的.table类，它的样式优先级是单个类选择器，你的自定义选择器只要是两个类的交集（比如.table.slb-table），优先级就会更高，能顺利覆盖默认样式。

总结核心要点 #

• 明确区分CSS的后代选择器和交集选择器，避免选错目标元素。
• React中必须用className代替class来设置元素类名。
• CSS的border属性需要完整的三个值：宽度、样式、颜色，否则不会生效。
• 通过更具体的选择器或者移除内联样式，避免自定义样式被默认样式覆盖。

内容的提问来源于stack exchange，提问作者Michael93