decorock
v0.1.8
Published
Styled component library for solid.js
Downloads
29
Readme
Styled component library for solid.js
Install
npm i decorock
Usage
styled
const Heading = styled.('h1')`
color: ${(p) => p.theme.color};
`
const Container = styled.div((p) => `
background-color: ${p.theme.bg};
`)
const Paragraph = styled.p((p) => ({
fontSize: p.theme.fontSize
}))
const Box = styled.div<{height: number}>`
height: ${(p) => p.height};
& > div {
color: blue;
}
`
<Box height={100} />
css
const Box = (props) => {
return (
<div
class={css`
background-color: aqua;
`}
>
{props.children}
</div>
)
}
Theme
import { styled, createThemeStore, ThemeProvider } from 'decorock'
const [theme, setTheme] = createThemeStore({
colors: {
primary: 'aqua',
},
})
const SomeText = styled.div`
color: ${(props) => props.theme.colors.primary};
`
render(
() => (
<ThemeProvider theme={theme}>
<SomeText>some text</SomeText>
</ThemeProvider>
),
document.getElementById('app'),
)
SSR
import { renderStyle } from 'decorock'
// After your app has rendered, just call it:
const styleTag = renderStyle()
// -> <style id="_goober">body { background-color: red; } .go000000000 {color: aqua;}</style>