Emotion JS support for Solid JS projects.
npm install emotion-solid``bash`
npm i emotion-solidor
yarn add emotion-solid
`ts
import { styled } from 'emotion-solid'
export type ButtonProps = {
block?: boolean
}
const StyledButton = styled('button')
{
display: 'inline-block',
padding: '8px 6px',
borderRadius: 8,
},
({ block }) =>
block && {
display: 'block',
width: '100%',
}
)
const Button: Component
return
}
export default Button
`
`tsx
import { render } from 'solid-js/web'
import Button from './Button'
function App() {
return
}
render(() =>
`
You can pass theme to all your styled components with ThemeProvider.
`ts
import type { Component } from 'solid-js/web'
import { ThemeProvider, styled } from 'emotion-solid'
const StyledButton = styled('button')(
({ theme }) =>
{
backgroundColor: theme.color,
width: '100%',
}
)
const App: Component = () => {
const [theme, setTheme] = createSignal({color: 'green'});
return
}
``
Note that you have to pass accessor function that returns the theme object
instead of just giving the theme object itself.
Contributions are more than welcome. If you see any changes fit, go ahead and open an issue or PR.
---
Any support is a huge motivation, thank you very much!