Overriding PrimeReact Styling

Question

I am trying to find the best solution for overriding the default 'Nova' theme used for Prime React. I am aware they have a theme designer available to purchase however I would ideally like to not use that. Previously I was having a scss file with every tsx file in my react application. I was using lines such as -

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

I was basically putting !important everywhere and it began to get very messy. I have thought about commenting out the import for the Prime React theme in my index.tsx file

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

And importing my own scss instead..

import './styles/Override.scss';

This makes the styling disappear completely and the page looks like it's purely html. I am thinking maybe I should copy all the code from the Nova theme file and then slowly start adjusting it in the override file.

Has anyone got a better way or any ideas?

Thanks

Bjorn.B · Answer 1 · 2020-09-01T16:30:16.503

One option like you said is to copy all of the css over, and then hide their import. That may be more work than you need depending on what you're trying to do.

I would probably rather create an override.scss and specifically overwrite rules, which with scss nesting shouldn't get too crazy. But one tip to avoid using !important is to be more specific with the way you target HTML elements. For instance, if there is a CSS rule of
body header ul a { color: pink; }
then you can override a rule by being more specific and write:
body header ul li > a { color: blue; }

However if the rule you're trying to overwrite has !important in it, then you'll have to use !important in your new rule overwrite it.

score 0 · Answer 2 · answered Sep 01 '20 at 16:16

Hmm, maybe I could help more if I had access to more code e.g. in codesandbox.io.

Do you try some modular CSS solution? Like Styled-jsx or Styled-Components?

If you would like to use styled-components, this answer could be helpful. PrimeReact and styled-component

A different solution could be, link the stylesheet with PrimeReact before your own stylesheet (inside of your HTML). This solution will require a deep analysis of the style implementation by the webpack.

Hope I could help somehow :)

Conceptual Actualization · Answer 3 · 2021-10-28T21:48:05.480

Later CSS imports that come after the theme will override the templates as the last CSS rule has higher specificity (precedence) in CSS

In the following of a create-react-app index.tsx (typescript .js), index.css will override the imported prime themes but CSS imports in the child React "App" component will not override the theme because it is imported first. (And the last applicable CSS is the one that gets used unless you override with !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")
    );

You can make your React component's CSS (like "App") override the React Prime theming by importing the theme CSS as the first thing, then components after making their CSS later and higher precedence.

    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")
    );

Overriding PrimeReact Styling

3 Answers3