Skip to content

Disable Patternfly React Auto Style Injection

Jump to bottom
Michael Spaxman edited this page Jul 16, 2019 · 1 revision

This is a quick guide to opting-out of the automatic stylesheet injection that happens as a side effect of importing @patternfly/react-core components in your UI.

The Problem: Too many styles to wade through in dev mode "yarn start"

Screen Shot 2019-06-14 at 10 32 06 AM

The Solution: Disable Patternfly React Auto Style Injection

It's actually quite simple. What you need to do is install/configure null-loader in your webpack config and then manually import the individual patternfly stylesheets you want. Let's do it step by step.

  1. Install null-loader
yarn add null-loader --dev
  1. Configure null-loader to discard only patternfly react styles by adding the following module rule to webpack.common.js
{
  test: /\.css$/,
  include: stylesheet => stylesheet.indexOf('@patternfly/react-styles/css/') > -1,
  use: ["null-loader"]
}

At this point, your pf react components will look "broken" because we've disabled all of those styles, we need to add them back manually.

  1. Install patternfly "core", the CSS offering.
yarn add @patternfly/patternfly
  1. Import the individual stylesheets for all the components, utilities, and layouts you may be using.
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly/patternfly-addons.css';
import '@patternfly/patternfly/components/Alert/alert.css';
import '@patternfly/patternfly/components/Page/page.css';
import '@patternfly/patternfly/components/Backdrop/backdrop.css';
import '@patternfly/patternfly/layouts/Bullseye/bullseye.css';
import '@patternfly/patternfly/layouts/Grid/grid.css';
import '@patternfly/patternfly/components/Button/button.css';
import '@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.css';
import '@patternfly/patternfly/components/Toolbar/toolbar.css';
import '@patternfly/patternfly/components/DataList/data-list.css';
// etc.

With all of this in place, the development experience is improved as you'll only see stylesheets that you've explicitly imported into your app, and the source order of those stylesheets is much less likely to change as a result of unrelated refactorings to your JS module architecture.

Clone this wiki locally