sxss

SXSS

Hyperminimal Theme UI implementation in ES

npm i sxss

/** @jsx jsx */
import { jsx, ThemeProvider } from 'sxss'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <div
      sx={{
        padding: 3,
        color: 'black',
        bg: 'tomato',
      }}>
      <h1>Hello</h1>
    </div>
  </ThemeProvider>

Box

Build custom components using the Box component

import React from 'react'
import { Box } from 'sxss'

export const Heading = props =>
  <Box
    as='h2'
    {...props}
    config={{
      themeKey: 'text',
      variant: 'heading',
      sx: {
        margin: 0,
      },
    }}
  />

createThemeUI

Create an isolated Theme UI implementation to avoid React context mismatches and collisions. This version does not use a ThemeProvider and does not allow for contextual, nested themes.

import { createThemeUI } from 'sxss'
import theme from './theme'

export const { jsx, Box } = createThemeUI(theme)