Customize Nextj PatternFly-react theme

Development PatternFly-React
#1

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!

#2

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?

#3

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.

#4

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

#5

Back ticks ~~~

#6

This is not ideal as might involve importing the fonts as

#7

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

#8

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

filter
filter1366×768 281 KB

Help highly appreciated

#9

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
primary1366×768 202 KB

Primary red-400

#10

And the spacing attributes filtered as