styled-jsx-system is a way to use styled-system with styled-jsx.
$ yarn add styled-jsx-system
You must also have styled-jsx and styled-system installed.
You have a Box component that you style with styled-jsx:
const Box = ({ children }) => {
return (
<div>
{children}
<style jsx>{`
div {
padding: 8px;
}
`}</style>
</div>
)
}
export default Box
If you want your Box to support styled-system props like space, export your Box component with the styled-jsx-system HOC and ensure you accept a className
prop:
+ import { space } from 'styled-system'
+ import withStyledSystem from 'styled-jsx-system'
- const Box = ({ children }) => {
+ const Box = ({ className, children }) => {
return (
- <div>
+ <div className={className}>
{children}
<style jsx>{`
div {
padding: 8px;
}
`}</style>
</div>
)
}
- export default Box
+ export default withStyledSystem(Box, [space])
That's it! You can now use styled-system props with your Box component:
<Box m={[20, 10, 5]}>Hello</Box>
To support more of styled-system's style props, add them to the second argument of the HOC:
import { space, typography, color } from 'styled-system'
export default withStyledSystem(Box, [space, typography, color])
// <Box /> now supports props like `color`, `bg`, `fontSize`, etc...
Using styled-system's compose works too:
import { compose, space, typography, color } from 'styled-system'
export default withStyledSystem(Box, [compose(space, typography, color)])
Custom props using the system utility are supported:
import { system } from 'styled-system'
const customProp = system({
lineClamp: {
property: 'WebkitLineClamp',
transform: (lines) => String(lines)
}
})
export default withStyledSystem(Box, [customProp])
// <Box /> now supports the lineClamp prop (i.e. <Box lineClamp={3} />)
styled-jsx-system supports themeing, just import the ThemeProvider from styled-jsx-system
:
import { ThemeProvider } from 'styled-jsx-system'
const myTheme = {
colors: {
gray: ['#fafafa', '#efefef', '#666']
}
}
export default () => (
<ThemeProvider theme={myTheme}>
<Box color="gray.2">Box component using a custom theme</Box>
</ThemeProvider>
)