覆盖 React 引导组件样式

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

这就是预样式组件库的工作方式；对于 css，他们通常有更高的specificity，而不是像你这样的单层。一个伪例子是：

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

这比您的单个嵌套 css 目标更胜一筹。 !important 仅应在绝对必要时使用（IMO）。另一种选择是编写您自己的、同样特定的 css 并使用它来覆盖 react-bootstrap 提供的内容。这只是您为使用这样的库而付出的代价。