覆盖PrimeRreact样式

Question

我正在努力寻找覆盖Prime React使用的默认"Nova"主题的最佳解决方案。我知道他们有一个主题设计师可以购买，但我最好不要使用它。以前，我的react应用程序中的每个tsx文件都有一个scss文件。我使用了诸如-之类的线路

.p-dropdown-trigger {
background-color: brown !important;
margin-left: 5px !important;
}

我基本上是在推杆！到处都很重要，事情开始变得很混乱。我已经考虑过在我的index.tsx文件中注释掉Prime React主题的导入

// import 'primereact/resources/themes/nova/theme.css';

然后进口我自己的scs。。

import './styles/Override.scss';

这使得样式完全消失，页面看起来像是纯html。我想也许我应该从Nova主题文件中复制所有代码，然后在覆盖文件中慢慢开始调整。

有人有更好的方法或想法吗？

感谢

Answer 1

您说过的一个选项是复制所有css，然后隐藏它们的导入。这可能比你需要的工作更多，这取决于你想做什么。

我可能更愿意创建一个override.scss，并专门覆盖规则，这与scs嵌套不应该太疯狂。但有一点要避免使用！重要的是更加具体地确定HTML元素的目标方式。例如，如果存在
body header ul a { color: pink; }
的CSS规则，则可以通过更具体的方式覆盖该规则，并写入：
body header ul li > a { color: blue; }

但是，如果你试图覆盖的规则中有!important，那么你必须在新规则中使用!important来覆盖它。

Answer 2

嗯，如果我能访问更多的代码，比如在codesandbox.io.中，也许我可以提供更多帮助

你尝试过一些模块化CSS解决方案吗？喜欢样式化的jsx还是样式化的组件？

如果您想使用样式化组件，这个答案可能会有所帮助。PrimeRreact和样式组件

另一种解决方案可能是，在您自己的样式表(在HTML内部(之前，将样式表与PrimeAreact链接。此解决方案需要对webpack的样式实现进行深入分析。

希望我能帮忙：(

Answer 3

主题之后的后续CSS导入将覆盖模板，因为最后一个CSS规则在CSS 中具有更高的特定性(优先级(

在创建react应用程序index.tsx(typescript.js(的下面，index.css将覆盖导入的主主题，但css在子react中导入；应用程序"；组件不会覆盖主题，因为它是先导入的。(最后一个适用的CSS是被使用的CSS，除非你用！important覆盖。(

import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";

import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
import "../node_modules/primereact/resources/primereact.min.css";
import "../node_modules/primeicons/primeicons.css";

import "./index.css";

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

你可以让你的React组件的CSS(比如"应用程序"(覆盖React Prime主题化，首先导入主题CSS，然后再导入组件，使其CSS更晚，优先级更高。

import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
import "../node_modules/primereact/resources/primereact.min.css";
import "../node_modules/primeicons/primeicons.css";

import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";

import "./index.css";

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);