时间戳

首页 > 解决方案 > 在反应应用程序中通过 react-bootstrap css 应用自定义字体粗细样式面临困难

javascript - 在反应应用程序中通过 react-bootstrap css 应用自定义字体粗细样式面临困难

问题描述

我尝试了很多方法来覆盖默认的引导 css，但在我的“Home.jsx”组件中无济于事。这是我的 Home.jsx（渲染主屏幕的组件）。

import React from "react";

function Home() {
  return (
    <div className="center" style={{ fontWeight: 700 }}>
      <h6>Hey! I am</h6>
      <h1>Abhuday Mishra</h1>
      <h3>
        a <span className="desc">Web Developer.</span>
      </h3>
    </div>
  );
}

export default Home;

这是我的 App.jsx

import MainNav from "./Navbar";
import Home from "./Home";

function App() {
  return (
    <div>
      <MainNav />
      <Home />
    </div>
  );
}

export default App;

最后这是我的styles.css

.center {
  font-family: "Poppins", sans-serif;
  text-align: center;
  align-items: center;
  margin-top: 14.8%;
}
.center h1 {
  font-size: 75px;
}
.center h6 {
  color: blue;
  font-size: 20px;
}
.navlink {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin-right: 40px;
}

.desc {
  color: blue;
  text-decoration: underline;
}

.navbrand {
  margin-left: 10px;
}

.logo {
  height: 35px;
  width: 120px;
}
body {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  background: rgb(234, 255, 208);
  background: linear-gradient(
    90deg,
    rgba(234, 255, 208, 1) 50%,
    rgba(255, 255, 255, 1) 51%
  );
}

我尝试过使用 css 模块覆盖引导 css、内联样式，但似乎没有任何效果。但是当我在 Chrome 中使用检查工具并手动打开字体粗细时，它工作正常。谢谢

标签： javascripthtmlcssreactjsfonts

解决方案

我认为我是css订购的问题。您需要在引导程序之后添加您的 css 文件。

我不知道您导入引导程序并添加 css 文件的顺序，但 css 的顺序应该如下所示，然后您将覆盖引导 css bootstrap.css styles.css

推荐阅读