CSS 未正确呈现

Question

我有一个使用 Material UI 的 React.js 网络应用。但是，此应用程序中的一个组件管理我们的网站并提供自定义内容的预览。该网站使用 Bootstrap 和 Font Awesome，因此我在 HTML 预览中将这些 CSS 以及我们的网站 CSS 导入到此组件的 jsx 中，如下所示（忽略导入路径，它们被隐藏但确认正确）：

我还尝试在 scss 文件中而不是在 jsx 中导入相同的文件，并在预览组件中使用 ES6 导入该文件。这产生了相同的结果。

在预览中，css 没有在浏览器中正确呈现。我试过 Chrome 和 Edge，它们的功能是一样的。页面上有几个元素的样式不正确，这里只是一个应该是橙色的按钮示例：

这是 Chrome 中的计算样式，它显示了背景颜色的正确十六进制值 #ff4c00（但不知何故具有不正确的 rgb 等效值）。 rgb 值似乎随着每次重新加载而改变，有时是正确的。但是，无论 rgb 值如何，按钮始终为蓝色并带有橙色边框。

按钮有以下类：btn btn-brand btn-round mr-2 mb-2 align-bottom。

以下是适用于按钮的 CSS 规则：

.ContentManager .btn {
    border-width: 2px;
    border-radius: 0;
    font-family: "Poppins", Arial, serif;
    text-transform: uppercase;
    letter-spacing: 0.09375rem;
    font-weight: 600;
    font-size: 0.625rem;
    padding: 0.9375rem 1.75rem 0.9375rem 1.75rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.ContentManager .btn:focus,
.ContentManager .btn.focus,
.ContentManager .btn.active.focus,
.ContentManager .btn.active:focus,
.ContentManager .btn:active.focus,
.ContentManager .btn:active:focus {
    outline: 0;
}
.ContentManager .btn.btn-circle {
    border-radius: 30px;
}
.ContentManager .btn.btn-round {
    border-radius: 2px;
}
.ContentManager .btn.btn-shadow {
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.ContentManager .btn.btn-brand {
    background-color: #ff4c00;
    border-color: #ff4c00;
    color: #ffffff;
}
.ContentManager .btn.btn-brand:hover,
.ContentManager .btn.btn-brand:focus {
    background-color: #802600;
    border-color: #802600;
    color: #ffffff;
}
.ContentManager .btn.btn-brand.btn-outline {
    background: #fff;
    border-color: #ff4c00;
    color: #ff4c00;
}
.ContentManager .btn.btn-brand.btn-outline:hover,
.ContentManager .btn.btn-brand.btn-outline:focus {
    background: #ff4c00;
    border-color: #ffffff;
    color: #ffffff;
}

浏览器如何显示正确的背景颜色值但呈现不同的颜色？有没有更好的方法来导入仅用于一个组件的一部分的外部 css 文件？

Answer 1

您不应该在 JSX 中添加<style> 标签，文件应该通过import 语句导入。请参阅此处的文档：https://create-react-app.dev/docs/adding-a-stylesheet/

例如：

import '../../../[yourCssFile].css';

您还可以使用 makeStyles 方法和主题将 CSS 注入到 material-ui 组件中，或者根据 material-ui 文档覆盖全局 CSS 规则：https://material-ui.com/api/button/#css