html - thead-dark 在使用 Bootstrap 的 Angular 元素中不起作用

Question

我尝试添加 thead-dark进入我的 table ，但不起作用。我正在使用 Bootstrap 。
我的代码:

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units In Stock</th>
        </tr>
    </thead>

Bootstrap :

....
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
....

它的最后一个版本的 Bootstrap 不支持黑暗？
如何进行？

Answer 1

你能检查下面的代码吗？希望它对你有用。在最新版本的 Bootstrap 中，我们可以使用“table-dark”类代替“thead-dark”。您可以在 thead 中使用“table-dark”类, tr , 和 td还。
请引用此链接:
https://jsfiddle.net/yudizsolutions/qomrf9pk/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Units In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Demo Name</td>
      <td>500</td>
      <td>50</td>
    </tr>
  </tbody>
</table>