并非所有 Bootstrap class 都在申请 React 应用程序

Question

我是 React 新手。所以目前我只是盲目地学习一些 React 课程并试图弄清楚事情是如何运作的。

当课程中显示的某些样式不适用于我的情况时，我偶然发现了问题：

export function SomeRenderer(props: MyProps) {
 // some logic
<p className="card-text font-italic">Rating: {rating}/10</p>
 // and
<div className="card-footer text-muted text-right">

所以 font-italic 不工作（不应用，即使 class 名称出现在 DOM 中）并且 text-right 也什么都不做。但是 card、card-footer、text-muted 等工作正常。

当我搜索类似问题时，我找到了唯一的建议，即在我的入口点添加 import "bootstrap/dist/css/bootstrap.css";。但它已经存在了。

另一个奇怪的事情是我注意到我的字体与课程和文档本身相比看起来很糟糕（抱歉，但我真的无法提供更好的解释）

package.json 中的依赖项（通过 create-react-app 创建）：

"dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.23",
    "@types/node": "^12.20.11",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "bootstrap": "^5.0.0",
    "moment": "^2.29.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-moment": "^1.1.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.4",
    "web-vitals": "^1.1.1"
  },

Answer 1

我认为是因为 bootstrap 5.0.0 是“fst-italic”而不是 font-italic 而“text-right”是“text-end”

你用的是bootstrap4class不是v5

查看 v5 的文档 docs

并非所有 Bootstrap class 都在申请 React 应用程序

Not all Bootstrap class are applying in React app

reactjs

react-bootstrap