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

Question

为什么我的自定义 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")
);

自定义css

 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;

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

Answer 1

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

使用 npm install react-bootstrap

下载 bootstrap

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

创建一个 scss 文件来覆盖 bootstrap 的 _variables.scss（确保 _functions.scss、_variables.scss、[=34= 的路径] 和 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 并添加对头部部分的引用，如下所示： https://uxplanet.org/how-to-customize-bootstrap-b8078a011203

Answer 2

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

谢谢

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

Custom css styles in react-bootstrap not working

reactjs

react-bootstrap

bootstrap-5