我尝试了很多方法来覆盖默认的 bootstrap 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 模块覆盖 bootstrap css、内联样式,但似乎没有任何效果。但是当我使用 Chrome 中的检查工具并手动打开字体粗细时,它工作得很好。 谢谢
最佳答案
我认为我是 css
排序的问题。
您需要在 bootstrap 文件之后添加 css 文件。
我不知道您导入 Bootstrap 并添加CSS文件的顺序 但CSS的顺序应该如下所示,然后你将覆盖引导CSS Bootstrap .css 样式.css
关于javascript - 在React应用程序中通过react-bootstrap css应用自定义字体粗细样式时遇到困难,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60197170/