0.1.1 • Published 4 years ago
sxss v0.1.1
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)