Install System Props from your terminal via npm or yarn. If you don't already have a CSS-in-JS library like Styled Components installed, you'll need one, too.
System Props begins with creating a system which dictates how the rest of the System Props function.
This function receives a configuration object:
strict: Optionally constrain system prop values to values from the theme object.
pseudoSelectors: Define a map of component prop (key) to a pseudo selector (value)
Now, this component will have two style props available:
color to set foreground color, and
bg to set background color. (You can also use
backgroundColor if you're adverse to terse naming conventions.)
So far, this component can be styled with any valid CSS color. The real advantage of System Props is its tight integration with a theme object to create more consistent UIs. (Design systems!)
Most CSS-in-JS libraries include a ThemeProvider to provide values through React context. Import the styled-components ThemeProvider in the root of your application and pass the theme to the
With the ThemeProvider added, the Box component now has access to the colors defined in the theme object.
System Props will attempt to find a value based on keys in the theme and fallback to the raw value if it's not defined in the theme (unless
strict was enabled in the
To make the Box component a little more useful, add a few more System Props functions to handle layout styles.
If you prefer using the plain object syntax, you can pass System Props functions in as arguments.