Our goal with Primer React is to hit the sweet spot between providing too little and too much styling flexibility; too little and the design system is too rigid, and too much and it becomes too difficult to maintain a consistent style. Our components already support a standard set of system props, but sometimes a component just isn't quite flexible enough to look the way you need it to look. For those cases, we provide the sx prop.
The sx prop allows ad-hoc styling that is still theme aware. Declare the styles you want to apply in camel-cased object notation, and try to use theme values in appropriate CSS properties when possible. If you've passed a custom theme using ThemeProvider or a theme prop, the sx prop will honor the custom theme. For more information on theming in Primer React, check out the Primer Theme documentation.
When to use the sx prop
The sx prop provides a lot of power, which means it is an easy tool to abuse. To best make use of it, we recommend following these guidelines:
Use the sx prop for small stylistic changes to components. For more substantial changes, consider abstracting your style changes into your own wrapper component.
Avoid nesting and pseudo-selectors in sx prop values when possible.
This example demonstrates applying a bottom border to Heading, a component that does not receive BORDER system props. The borderBottomWidth value comes from theme.borderWidths and borderBottomColor comes from theme.colors.