Style using props

@xstyled/styled-components allows you to style components using props.

Use the Box component

The Box component has all style props built-in. You can use it as a primitive to build almost everything.

import { Box } from '@xstyled/styled-components'
function Example() {
return (
<Box maxWidth={900}>
<Box forwardedAs="h1">Title of the page</Box>
<Box forwardedAs="p" fontSize={18} color="primary">
Description of the page
</Box>
</Box>
)
}

Create a system component

Additionally to all shorthand html tags available in styled-components, @xstyled/styled-components exposes a box. It creates a "styled" Box with all style props available.

import styled from '@xstyled/styled-components'
/* Creates a `div` box with a "background-color: red;" by default */
const RedBox = styled.box`
background-color: red;
`
<RedBox m={2} />
<RedBox backgroundColor="blue" />

Creates a specific tag using xxxBox, all valid HTML tags are supported:

import styled from '@xstyled/styled-components'
/* Creates a `a` box */
const PrimaryLink = styled.aBox`
color: primary;
`
<PrimaryLink href="/about" fontSize={20}>Link</PrimaryLink>

Use another component

On all box components, use forwardedAs property instead of as to avoid undesired attributes on the HTML element.

import styled from '@xstyled/styled-components'
/* Creates a `div` box */
const RedBox = styled.box`
background-color: red;
`
/* Replace `div` by `p`, but it's still a box! */
<RedBox forwardedAs="p" m={2} />

Available props

Almost every CSS attributes are supported as props, see the complete list.

Advanced

Advanced users may want to create their own props aware components. @xstyled/system exposes all utilities for that.

Add all props

All style props utilities are exported from @xstyled/system, you can use them independently, compose them, or use them all using system.

import { system } from '@xstyled/system'
const Box = styled.div`
${system}
`
// All props are available
<Box m={1} color="primary" />

Compose style props

The compose method composes existing utilities:

import { compose, color, backgroundColor } from '@xstyled/system'
const colors = compose(
color,
backgroundColor,
)
const Box = styled.div`
${colors}
`
// color and backgroundColor are available
<Box color="primary" backgroundColor="gray" />

Avoid undesired props

With styled-components, all props are forwarded, to avoid that behaviour, use createSystemComponent method, it omits all properties.

import React from 'react'
import { compose, color, backgroundColor, createSystemComponent } from '@xstyled/system'
const colors = compose(
color,
backgroundColor,
)
const InnerBox = createSystemComponent(React, 'div', colors)
const Box = styled(InnerBox)`
${colors}
`
// color and backgroundColor are available
<Box color="primary" backgroundColor="gray" />
// use forwardedAs instead of as to keep using the system component
<Box forwardedAs="header" color="primary" backgroundColor="gray" />