Emotion Solid

Installation

``bash
npm i emotion-solid


or

`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 = (props) => {
return {props.children}
}

export default Button
`

`tsx
import { render } from 'solid-js/web'
import Button from './Button'

function App() {
return Click Me
}

render(() => , document.getElementById('app'))
`

Themes

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 Click Me
}
``

Note that you have to pass accessor function that returns the theme object
instead of just giving the theme object itself.

Contributing 🙌

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!