Skip to main content

styled

Tool to style elements.

Submit feedback
Edit this page
github
View source code
import { styled } from '@uhg-abyss/web/tools/styled';

Object syntax only​

Write CSS using the object style syntax. The reasons for this are: performance, bundle size and developer experience (type checks and autocomplete suggestions for both properties and values).

const Button = styled('button', {
  color: 'red',
  fontSize: '14px';
  '&:hover': {
    color: 'black',
    fontSize: '14px';
  },
});

Chaining selectors​

All chained selectors require the & sign.

const Button = styled('button', {
  // all chained
  '&:hover': {},
  '&::before': {},
  '&.class': {},
});

Prop interpolation vs variants​

You can conditionally apply variants at the consumption level, including at different breakpoints.

const Button = styled('button', {
  variants: {
    color: {
      violet: { backgroundColor: 'blueviolet' },
      gray: { backgroundColor: 'gainsboro' },
    },
  },
});


() => <Button color="violet">Button</Button>;

Tokens and themes​

You can define tokens in the createTheme config file and seamlessly consume and access them directly in the Style Object.

See the Tokens documentation page for more information.

const Example = styled('div', {
  backgroundColor: '$core.color.brand.100',
  height: 100,
  width: 100,
});

Focus rings​

You can use the focusRing property to add focus rings to your styled components.

const Example = styled('div', {
  '&:focus-visible': {
    focusRing: 'default',
  },
});

Available focus ring styles:

OptionDescription
defaultStandard focus for most interactive elements. Includes outline with border radius.
boundingBorderUse when focus outline should align exactly with element borders.
activeImmediatelyUse for buttons and clickable elements to show focus on mouse click.
insetUse when focus should appear inside element boundaries (e.g., in tight layouts).
insetHighlightUse for form inputs and controls requiring prominent inset focus indication.
noneRemove all focus styles

Modifiers:

  • Add !alt to any style (e.g., focusRing: 'default !alt') to use the alternate focus color.
  • You can override the focus color by passing a token (e.g., focusRing: 'default $core.color.brand.100').

Global styles​

You can add global styles with the globalStyles API.

import { globalCss } from '@uhg-abyss/web/tools/styled';


const globalStyles = globalCss({
  body: {
    margin: '0',
  },
});


export function App() => {
  globalStyles();
  return <div>Your app</div>
}

Animations​

You can use the keyframes function to add animations

import { keyframes } from '@uhg-abyss/web/tools/styled';


const fadeIn = keyframes({
  '0%': { opacity: '0' },
  '100%': { opacity: '1' },
});


const Box = styled('div', {
  animationName: fadeIn,
});

Dynamic/static​

When Emotion variants won't work and the CSS styling you need is variable, you can use the static and dynamic config in the styled tool. Place all of your static CSS along with variants, compoundVariants, and defaultVariants in the static config. The dynamic config accepts a function that returns any properties that are passed to the component. You can then use those props to handle dynamic styles like sizing and colors.

For the best results and performance, it is recommended to use variants whenever possible.

Table of Contents