-
Notifications
You must be signed in to change notification settings - Fork 18
Styling
Matt Roth edited this page Aug 1, 2024
·
9 revisions
- use classnames or
style
property - define styles in stylesheets for static css
- search for existing css classes that may already do what you need
- Only for dynamic styles is CSS-in-JS acceptable
Styles can be applied two ways:
- Globally
- Component-Specific
Global styles are necessary for certain things that our out of our direct control. This is how we apply styles from the US Web Design System.
In general, we should prefer to apply component-specific styles in order to:
- avoid collisions in class names
- bring greater clarity to which styles apply to which components
We use https://v1.designsystem.digital.gov/components/colors/ for colors and should not be defining custom colors.
https://www.npmjs.com/package/classnames
Traditionally, Caseflow has used the glamor
library to do CSS-in-JS styling. This library has ceased active development.
It is recommended to use classnames and style
property instead.