Custom styles

The aim of the component library is a consistent style. That's why the components' styling options are limited. However, for positioning purposes or for adding margins custom CSS may be necessary.

The css prop

Most components in the component library support a css prop that works similar to React's style prop. Behind the scenes it filter every supported property from the provided list and applies these styles on the root element of the component.

In the following example we want to increase the space between the buttons. We do this by applying a margin (using the Spacing20 design-token) to the first element.

Live Editor

<> <Button label="Button 1" css={{ marginRight: Spacing20 }} /> <Button label="Button 2" /> </>

<>
  <Button label="Button 1" css={{ marginRight: Spacing20 }} />
  <Button label="Button 2" />
</>

Result

Loading...

Only use the css prop for positioning purposes. If you discover purely visual inconsistencies (incorrect colors, fonts etc.) between components and the designs, please contact the design system team.

Supported style properties

Find all of the supported style properties here.

Which components support the css prop?

Only components that are positioned in the natrual flow of the website support the css prop (such as Button or Tile).

Components that are sitting above the content and are taken out of the natrual flow of the website (such as the Modal, Tooltip or Snackbar) don't support the css prop. As these components can't interfere or collide with the position of other components on the page no custom positioning is necessary.