The `sx` prop

The `sx` prop allows you to over-ride styles when you need to while remaining consistent with design system theme values

Source Storybook

Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Introduction

The sx prop is used by UI libraries to allow developers to add inline, ad-hoc styles to components while still maintaining visual consistency and remaining theme-aware of the values provided by design tokens to the design system library.

To use the sx prop, declare styles in lowerCamelCase object notation.

Use values from Fuegokit React's default theme object, or a custom theme object you provide to ThemeProvider.

When using low-level primitives like Box and Text, prefer using the sx prop to system-props:

Composing components and using the sx prop

The sx prop handles pseudo-elements and pseudo-classes, and provides an ergonomic interface for applying ad-hoc styles and conditional logic when composing components.

However, as a general rule of thumb, abstract your component into a reusable pattern whenever you need to use more than 4 or 5 CSS declarations using the sx prop.

import {Radio, RadioGroup} from '@fuegokit/react'
import styled from 'styled-components'

function MyApp() {
  return (
    <>
      <RadioGroup>
        <StyledRadio id={`radio-1`} />
        <label

Nesting and pseudo-elements

You can declare styles based on media queries, pseudo-classes, and pseudo-elements with the sx prop:

Do's and don'ts

Do

<Box sx={{p: 4, borderRadius: 1, backgroundColor: 'background.discovery.default', border: '1px solid', borderColor: 'border.discovery'}} />

Do

Use the sx prop for applying theme-aware styling logic.

Don't

<Box sx={{padding: '21px', borderRadius: '11px', backgroundColor: '#ff69b4', border: '3px solid', borderColor: '#8b008b' }} />

Don't

Don't abuse the sx prop by using hard-coded values that aren't in the system.

Examples

This example demonstrates how you might choose to compose a piece of UI entirely from a few primitives (Box, Stack, Link) and the sx prop.

Compare it with the example further down the page, which achieves the same UI, but abstracts decisions into patterns that can be re-used, while maintaining consistency with the design system.

Use the live code playground below to provide design system theme values to the CSS properties in the sx prop, and observe how it affects the card that is rendered.

To get started, change `bg: 'elevation.surface.default.[default]'` to `bg: 'background.information.default.[default]` and `boxShadow: 'shadow.raised'` to `boxShadow: 'shadow.overlay'` in the example below.

The same example, which also uses the sx prop, but composes components from (Box, Stack, and Link), and abstracts them into reusable patterns:

[Issue] Getting Started Page

[React] Fuegokit React

1

DS-207

import React from 'react'
import styled from 'styled-components'
import {themeGet, Box, Stack, Text, Link} from '@fuegokit/react'

const IssueCard = ({title, project, projectTypeImgUrl, projectPriorityImgUrl, count, assignee})
  return (
    <Wrapper as="div">
    <Stack size={3} sx={{height: 'auto'}}>
      <Header as="section">{title}</Header>

Over-riding styles

When composing components, use the sx prop to ensure that it can be used in future use cases when an escape hatch might be necessary, when a developer might absolutely need to over-ride a style.

When styling components, use Fuegokit's semantic theme values wherever possible.