CSS in Patternfly React

Support
#1

Hi,

I’ve recently started to use PF React in one project and have a couple of problems/questions…

  1. CSS rules appear duplicated for some reason

    duplicated_css

  2. Different styles in development and production builds - cannot upload more than one image, but an example of this issue is the input element of the Select typeahead component which in production ends up displaying borders.

  3. Lastly, what’s the proper way to style a component, override or extend existing styles?

Thanks

#2

  1. Example of Select Typeahead with different stylings

    select_typeahead_css

#3

Hi @knokit - there should be zero difference between production and dev. With that being said - there is only a production build of the CSS that is distributed. Do you have a link to your repo or a repro case online so I can look at your setup?

#4

Thanks @dgutride, for helping me solving the duplication issue.

The css duplication was caused by 2 different things:

  • the app was importing @patternfly/react-core/dist/styles/base.css and @patternfly/patternfly/patternfly.css - only the first stylesheet should be imported
  • webpack was misconfigured and was producing 2 copies of the same stylesheet

Regarding the differences between dev and prod, I’ve created a simple repo, based on patternfly-react-seed, that reproduces the problem:

It seems that in production build the css rules are extracted into the stylesheet file in a different order.
Any suggestions how to solve this?