Skip to content

docs(readme): add section for configuring css #12616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 2 commits into from
Aug 10, 2026
+10 −2
Merged

docs(readme): add section for configuring css #12616

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f573b0
docs(readme): add section for configuring css
kmcfaul Aug 10, 2026
44010e7
Update README.md
kmcfaul Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,17 @@ If you want to start with your existing project, skip to [Install and configure

Once the library is installed, use the specific setup instructions for that library to access the components it contains. These can be found in the readme for each [library](#patternfly-react-packages).

#### Configure PatternFly styling
PatternFly uses the [`@patternfly/react-styles` package](https://www.npmjs.com/package/@patternfly/react-styles) as a translation layer to reference the styles contained in the PatternFly HTML/CSS library. When developing with Patternfly React, include the following import at the base level of your application to pull in PatternFly's styling:

```
import '@patternfly/react-core/dist/styles/base.css';
```
Comment on lines +85 to +87

@coderabbitai coderabbitai Bot Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Specify the JavaScript code fence.

Use ```js instead of ` ````. This resolves markdownlint MD040 and enables correct renderer behavior.

Proposed fix 
-```
+```js
 import '`@patternfly/react-core/dist/styles/base.css`';
🧰 Tools
🪛 markdownlint-cli2 (0.23.2)

[warning] 85-85: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 85 - 87, Update the JavaScript code fence around the
PatternFly stylesheet import in README.md to use the js language identifier,
changing the opening fence from ``` to ```js while preserving the import and
closing fence.

Source: Linters/SAST tools


Importing css directly from the PatternFly HTML/CSS library while using PatternFly React may result in duplicated stylesheets in the browser as PatternFly React already pulls in styles internally via `@patternfly/react-styles`.

@coderabbitai coderabbitai Bot Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Place the guidance in packages/react-core/README.md.

The PR objective requires this section in the react-core package README. The changed file is the repository-root README.md. Add or move the section to packages/react-core/README.md so users of @patternfly/react-core can find the required CSS setup instructions with the package documentation.

🧰 Tools
🪛 markdownlint-cli2 (0.23.2)

[warning] 85-85: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 82 - 89, Move the “Configure PatternFly styling”
section from the repository-root README.md into packages/react-core/README.md,
preserving its CSS import guidance and warning about duplicate stylesheets.
Remove the section from the root README so the package-specific documentation is
the single source.

Comment thread
kmcfaul marked this conversation as resolved.
Outdated

### Contribution guidelines
All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/get-started/contribute/contributing-to-patternfly). If you're already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions.

### License
PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).

PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).
Loading