覆盖 React bootstrap 组件样式

Question

我从 react-bootstrap 导入了一个 Table 组件，并想在我的项目中使用它。但是，我发现很难覆盖此组件的默认样式。我想出的唯一方法是在每一行的末尾添加 !important，但是我认为必须有更好的方法。

这是我的 Table 组件的样子：

<Table striped bordered hover>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</Table>

这就是我的 CSS 文件的样子：

th {
  text-align: center;
  border: none !important;
}

如果没有 !important，它会尝试保留边界（许多情况之一）。

Answer 1

这就是预定义组件库的工作方式；他们通常 specificity 对于 css 比像你这样的单层更高。一个伪示例是：

table {
  thead {
    tr {
      th {
        border: 1 px solid black;
      }
    }
  }
}

这超过了您的单个嵌套 css 目标。 !important 只应在绝对必要时使用 (IMO)。另一种选择是编写您自己的、同样具体的 css 并使用它来覆盖 react-bootstrap 提供的内容。这只是您为使用这样的库付出的代价。

Overriding React bootstrap component styling