覆盖PrimeReact样式

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';

然后导入我自己的scss ..

import './styles/Override.scss';

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

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

谢谢

Answer 1

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

我可能更愿意创建一个override.scss，特别是覆盖规则，这与scss嵌套不应该变得太疯狂。但是，避免使用！的一个技巧是更具体地针对HTML元素的方式。例如，如果有一个CSS规则

body header ul a { color: pink; }

然后，您可以通过更具体地覆盖规则，并编写：

body header ul li > a { color: blue; }

但是，如果您试图覆盖的规则中包含!important，则必须在新规则中使用!important覆盖它。

Answer 2

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

你有没有尝试过一些模块化的CSS解决方案？像Styled-jsx或Styled-Components？

如果你想使用样式组件，这个答案可能会很有帮助。PrimeReact and styled-component

一种不同的解决方案是，在您自己的样式表之前(在您的PrimeReact中)将样式表与HTML链接。这个解决方案需要对webpack的样式实现进行深入分析。

希望我能以某种方式提供帮助:)

Answer 3

稍后，主题后面的CSS导入将覆盖CSS中的the last CSS rule has higher specificity (优先级)模板。

在下面的创建-反应-应用程序index.tsx (typescript .js)中，index.css将覆盖导入的主主题，但子React“应用程序”组件中的CSS导入不会覆盖主题，因为它是首先导入的。(最后一个适用的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 (如"App")覆盖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")
    );