react-bootstrap中的自定义css样式不起作用答案

【问题标题】：Custom css styles in react-bootstrap not workingreact-bootstrap中的自定义css样式不起作用
【发布时间】：2021-12-31 23:17:19
【问题描述】：

为什么我的自定义 CSS 样式不适用于 react-bootstrap？我使用 npx create-react-app、node-sass 和 npm i react-bootstrap。我错过了什么？

谢谢！

这是我的示例文件：

index.js代码：

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



/*import here*/

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

自定义scss

 body {
  background: #0b739c;
}

.login-form {
  background: white;

  h1 {
    /*styles here*/
  }

  form {
    input {
      background: #ffffff;
      border: 1px solid #dcdcdc;
      box-sizing: border-box;
      border-radius: 40px;
    }
  }
}

login.js代码

import "./Login.module.scss";
/*code here*/

    const Login = () => {
      return (
        <Container fluid>
          <Row>
            <Col>
              <Image src={LoginImage} alt="login image" />
              <h2>Bring all your friends to any network!</h2>
            </Col>
            <Col className="m-0 login-form">
              /*form code here*/
            </Col>
          </Row>
        </Container>
      );
    };
    
    export default Login;

示例输出，自定义样式未反映：

【问题讨论】：

标签： reactjs react-bootstrap bootstrap-5

【解决方案1】：

基本上可以归结为以下几个步骤：

使用 npm install react-bootstrap 下载引导程序

安装 SASS 预处理器 (https://sass-lang.com/install)

为覆盖 bootstrap 的 _variables.scss 创建一个 scss 文件（确保 _functions.scss、_variables.scss、_mixins.scss 和 bootstrap.scss 的路径正确

@import "bootstrap/scss/functions"; 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

/* Your customizations here */

$theme-colors: (
  primary: red;
 );

@import "bootstrap";

将您的 stylesheet.scss 转换为 stylesheet.css 并添加对 head 部分的引用，如下所示： https://uxplanet.org/how-to-customize-bootstrap-b8078a011203

【讨论】：

【解决方案2】：

我在Login.module.scss 上解决了这个问题，将文件更改为Login.scss，它工作正常。

谢谢

【讨论】：