覆盖React Bootstrap组件样式

Question

我已经从Table导入了react-bootstrap组件，并想在我的项目中使用它。但是，我发现很难覆盖此组件的默认样式。我唯一想到的方法是在每行末尾添加!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，并使用该css覆盖react-bootstrap提供的内容。这只是您使用此类库所要付出的代价。