styled-base (WIP)

Table of contents

• Motivation
• Getting started
• Props
  • as
  • css
  • theme
• Usage
  • Theming
  • Pseudo-selectors
  • Responsive styles
  • Extending
• Further reading

Motivation

Getting started

1. Install

npm install styled-base styled-components@beta
# or
yarn add styled-base styled-components@beta

2. Import

import Base from 'styled-base'

3. Use

<Base
  as="span"
  css={{ 
    color: 'white',
    backgroundColor: 'black',
    '&::before': {
      content: '"🌎"',
    },
  }}
>
  Hello World
</Base>

Props

as

Type: string or func

<Base as="button" />
<Base as={Link} />

css

Type: object

<Base css={{ fontFamily: 'sans-serif', color: 'red' }} />

theme

Type: object

Usage

Theming

import React from 'react'
import { ThemeProvider } from 'styled-components'
import Base from 'styled-base'

const theme = {
  spacing: [
    '0',
    '4px',
    '8px',
    '16px',
    '24px',
    '32px',
  ],
  colors: {
    blue: '#07f',
    gray: '#ccc',
  },
}

export default props => (
  <ThemeProvider theme={theme}>
    <Base 
      css={{
        display: 'inline-block',
        padding: '$spacing.1 $spacing.2',
        color: '$colors.blue',
      }}
    >
      Hello World
    </Base>
  </ThemeProvider>
)

You can theme individual components by passing a theme object directly:

import React from 'react'
import Base from 'styled-base'

const theme = {
  colors: {
    green: '#0f7',
  },
}

export default props => (
  <Base
    theme={theme}
    css={{ color: '$colors.green' }}
  >
    Hello World
  </Base>
)

Setting a default theme

import { createBase } from 'styled-base'
import theme from './path/to/theme'

const Base = createBase(theme)

export default Base

Pseudo-selectors

<Base
  css={{
    color: 'blue',
    '&:hover': {
      color: 'red',
    },
    '&::before': {
      content: '"🌎"',
    },
  }}
>
  Hello World
</Base>

Responsive styles

const theme = {
  spacing: [
    '0',
    '4px',
    '8px',
    '16px',
    '24px',
    '32px',
  ],
  breakpoints: [
    '576px',
    '768px',
    '992px',
    '1200px',
  ],
}

<Base
  css={{
    padding: [
      '$spacing.1', // 4px at all viewport widths
      '$spacing.2', // 8px from the next breakpoint (576px) and up
      '$spacing.3', // 16px from the next breakpoint (768px) and up
    ],
  }}
/>
  Hello World
</Base>

To skip setting a value at a particular breakpoint, use a null value in the array:

<Base
  css={{
    padding: [
      '$spacing.1', // 4px at all viewport widths
      null,         // skip the next breakpoint (576px) (stays 4px)
      '$spacing.2', // 8px from the next breakpoint (768px) and up
    ],
  }}
/>
  Hello World
</Base>

Extending

import React from 'react'
import Base from 'styled-base'

function Container({ css, ...props }) {
  return (
    <Base
      css={{
        margin: '0 auto',
        maxWidth: '960px',
        ...css,
      }}
      {...props}
    />
  )
}

Further reading

• Patterns for Style Composition in React by Brent Jackson