如何防止引导程序影响特定元素及其子元素？

Question

下面是一个工作反应代码，它只呈现一个小表格。

应用程序.js

import React from 'react';
import './style.css';
// import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div>
      <table>
        <tr>
          <td>00</td>
          <td>01</td>
        </tr>
        <tr>
          <td>10</td>
          <td>11</td>
        </tr>
        <tr>
          <td>20</td>
          <td>21</td>
        </tr>
      </table>
    </div>
  );
}

样式.css：

table {
  /* border: 1px solid black; */
  border-collapse: separate;
}

td {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

您可以在 App.js 文件中看到第三行 importing bootstrap 被注释掉。 当它被注释掉时，表格被渲染为每个单元格的边框，并且每个单元格之间有一个空格，因为border-collapse: separate; 在我想要的css文件中。

当我取消注释时，它会导入引导程序并且表格单元格的边框消失了。 在 table 标记中，我没有添加任何引导类。

有什么办法可以防止这种情况并让我的边界恢复正常吗？

请在此处查看我的代码和执行： https ://stackblitz.com/edit/react-ix81bu?file=src%2FApp.js。

Answer 1

选项 1：取消注释导入引导行以获取其样式。 然后尝试border-collapse: revert; 而不是border-collapse: separate; 这应该撤消 bootstrap 对border-collapse的影响。

选项 2：取消注释导入引导行以获取其样式。 改变border-collapse: separate; 到border-collapse: separate !important; 这样它就不会被覆盖。 有关深入的概念，请参阅介绍 CSS 级联。