npm i emotion-solid
# or
yarn add emotion-solid
import { styled } from 'emotion-solid'
export type ButtonProps = {
block?: boolean
}
const StyledButton = styled('button')<ButtonProps>(
{
display: 'inline-block',
padding: '8px 6px',
borderRadius: 8,
},
({ block }) =>
block && {
display: 'block',
width: '100%',
}
)
const Button: Component<ButtonProps> = (props) => {
return <StyledButton {...props}>{props.children}</StyledButton>
}
export default Button
import { render } from 'solid-js/web'
import Button from './Button'
function App() {
return <Button block>Click Me</Button>
}
render(() => <App />, document.getElementById('app'))
You can pass theme to all your styled components with ThemeProvider
.
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 <ThemeProvider theme={theme}><Button>Click Me</Button></ThemeProvider>
}
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!