System

Smooth UI implements xstyled system in all components. It gives you real power to style your application in a declarative way.

Use system props

System props gives you an opportunity to modify all styles directly from props.

For example, you can easily change the backgroundColor and the horizontal padding of a Button:

Hello world
import React from 'react'
import { Button } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Button px="2rem" backgroundColor="blue">
      Hello world
    </Button>
  )
}

render(<Example />)
import React from 'react'
import { Button } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Button px="2rem" backgroundColor="blue">
      Hello world
    </Button>
  )
}
render(<Example />)

You can see all possibility offered by system properties on xstyled documentation.