styled-base
v0.5.2
Published
[![Version][version-badge]][npm]
Downloads
4
Readme
styled-base (WIP)
Table of contents
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}
/>
)
}