React-Bootstrap Table组件无样式问题求助

你的表格没有条纹、悬停等样式，主要是两个问题导致的：

1. 安装命令存在拼写错误 #

你执行的安装命令里boostrap拼写错误，正确的包名是bootstrap，这可能导致Bootstrap样式包未被正确安装。请重新执行正确的安装命令：

npm install react-bootstrap bootstrap

2. 未导入Bootstrap核心样式文件 #

React-Bootstrap只是Bootstrap的React组件封装，本身不包含Bootstrap的CSS样式，必须手动导入样式文件才能让组件呈现预期的视觉效果。

你可以通过以下两种方式导入样式：

• 在入口文件中直接导入：在项目的入口文件（如src/index.js或src/App.js）顶部添加：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

• 通过CSS文件@import导入：在项目的全局CSS文件（如src/index.css）中添加：

  @import 'bootstrap/dist/css/bootstrap.min.css';
  

修改后的完整示例代码 #

import 'bootstrap/dist/css/bootstrap.min.css';
import { Table } from 'react-bootstrap';

function App() {
  return (
    <div className="container mt-4">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Chest No.</th>
          </tr>        
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>No one</td>
            <td>101</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Hamdan Salih