Customize Nextj PatternFly-react theme

Installed PatternFly/react 4 in my Nextjs 13.3.1. import ‘@patternfly/react-core/dist/styles/base.css’; & import ‘./styles/global.css’; In the layout.tsx file n my global.css looks like

/* Override global primary color 100 to red */
:root {
    height: 100%;
    --pf-global--primary-color--100: var(--pf-global--palette--red-400);
  /* Override the above override for only the primary button background color */
  .pf-c-button {
    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--palette--red-400);

The won’t inherit the red. Keeps the default primary which is blue.
Help highly appreciated!

Hey @anyuruf! What you have here looks OK to me. I wonder if it’s a loading order issue? Here are a few examples showing where the overrides should be:

cool-bas-hl39l6 - CodeSandbox - note that none of the overrides are working because global/:root and button component vars from PF are overriding the custom styles.

hopeful-haze-0n150k - CodeSandbox - the global override is working, but not the button override

admiring-silence-b5y0e5 - CodeSandbox - both overrides are working

Can you test that out and see if changing the loading order helps?

For some reason the CodeSand box link won’t pop in my browser, is it possible to explain say with a code snippet. Quote the block of code with tripple back quote.

Thinking about coping the base.css file to global n customizing from there

Back ticks ~~~

This is not ideal as might involve importing the fonts as

Running react-d3-force, apollo client alpa, with Nextjs Support libs for the apollo client on Nextjs 13.3.1 with patternFly 4. Public Repo GitHub - anyuruf/genie-nextjs

Loaded the sandbox in Chrome. Not much difference looks like some of my styles are being filtered for no reason.

Help highly appreciated

The styles are coming through, its just the Mast head is inheriting color from pc-class name with a background for transparent n when disabled won’t overide the primary button though primary button inherits the color as you can see

Primary red-400

And the spacing attributes filtered as