React Bootstrap项目中自定义CSS类未加载生效问题

• 问题根源：你用了CSS Modules（文件名是Dash.Module.css），但直接在按钮的className里写btn-top-right是没用的——CSS Modules会给类名自动加哈希前缀，必须通过导入的classes对象来引用这个类。

• 直接修复代码：
  修改Dash.js里按钮的className，把btn-top-right换成classes['btn-top-right']，用模板字符串和其他Bootstrap类拼起来：

  import 'bootstrap/dist/css/bootstrap.min.css';
  import {Container, Row, Col } from 'react-bootstrap';
  import init from './Svg'
  import axios from 'axios'
  
  import classes from './Dash.module.css'
  const Dash = (props) => {
  ...
    render() {
      return (
        <div className="container">
          <button className={`btn btn-primary ${classes['btn-top-right']} float-end`}>CPU</button>
        </div>
      );
    }
  ...
  }
  

• 额外调整建议：

  1. 你当前CSS里的top:2000px、right:50000px数值太大，按钮会跑到可视区域外，建议先改成小数值测试，比如：

     .btn-top-right {
         position: absolute;
         top: 20px;
         right: 20px;
       }
     

  2. 如果希望按钮相对于父容器container定位，给父容器加position: relative，不然绝对定位会以整个文档为基准：

     .container {
       position: relative;
       min-height: 100vh; /* 保证容器高度足够，按钮不会被遮住 */
     }
     

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