message: Use functional variables in documentation for overriding styles
diff: title: Overriding styles with the sx prop
  ---
  -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](/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.
  +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](/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](/primer-theme).
  @@ -10,9 +10,9 @@ The `sx` prop allows ad-hoc styling that is still theme aware. Declare the style
  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.
  -* Use [system props](/system-props) instead of the `sx` prop whenever possible.
  -* Avoid nesting and pseudo-selectors in `sx` prop values when possible.
  +- Use the `sx` prop for small stylistic changes to components. For more substantial changes, consider abstracting your style changes into your own wrapper component.
  +- Use [system props](/system-props) instead of the `sx` prop whenever possible.
  +- Avoid nesting and pseudo-selectors in `sx` prop values when possible.
  ## Basic example
  @@ -25,7 +25,7 @@ This example demonstrates applying a bottom border to `Heading`, a component tha
  pb={2}
  sx={{
  borderBottomWidth: 1,
  - borderBottomColor: 'border.gray',
  + borderBottomColor: 'border.primary',
  borderBottomStyle: 'solid'
  }}>
  Heading with bottom border
  @@ -40,8 +40,9 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
  <BorderBox
  p={2}
  sx={{
  - bg: ['red.1', 'green.1', 'blue.1', 'purple.1', 'yellow.1']
  - }}>
  + bg: ['bg.primary', 'bg.info', 'bg.success', 'bg.warning', 'bg.danger']
  + }}
  +>
  Responsive background color
  </BorderBox>
  ```
  @@ -51,10 +52,11 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
  The `sx` prop also allows for declaring styles based on media queries, psueudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability:
  ```jsx live
  -<Box sx={{
  +<Box
  + sx={{
  '> *': {
  borderWidth: 1,
  - borderColor: 'border.gray',
  + borderColor: 'border.primary',
  borderStyle: 'solid',
  borderBottomWidth: 0,
  padding: 2,
  @@ -62,10 +64,11 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
  borderBottomWidth: 1
  },
  ':hover': {
  - bg: 'gray.1'
  + bg: 'border.tertiary'
  }
  }
  -}}>
  + }}
  +>
  <Box>First</Box>
  <Box>Second</Box>
  <Box>Third</Box>
  