# Solid Styled Components
[](https://github.com/solidui/solid-styled-components/actions/workflows/main-ci.yml)
[](https://www.npmjs.com/package/solid-styled-components)
This library provides Styled Components and css helper found in popular JS in CSS libraries. This library uses [goober](https://github.com/cristianbote/goober) a 1kb style library with a wrapper to work with Solid's API. The wrapper also adds a Theming solution.
## Features
### `styled(tagName)`
- `@param {String} tagName` The name of the dom element you'd like the styled to be applied to
- `@returns {Function}` Returns the tag template function.
```js
import { styled } from "solid-styled-components";
const Btn = styled("button")`
border-radius: 4px;
`;
```
#### Tagged Templates
```jsx
import { styled } from "solid-styled-components";
const Btn = styled("button")`
border-radius: ${props => props.size}px;
`;
;
```
#### Function returns a string
```jsx
import { styled } from "solid-styled-components";
const Btn = styled("button")(
props => `
border-radius: ${props.size}px;
`
);
;
```
#### Nesting styled components
```jsx
import { styled } from "solid-styled-components";
const Icon = styled("span")`
display: flex;
flex: 1;
color: red;
`;
const Button = styled("button")`
background: dodgerblue;
color: white;
border: ${Math.random()}px solid white;
&:focus,
&:hover {
padding: 1em;
}
.otherClass {
margin: 0;
}
${Icon.className} {
color: black;
}
`;
```
#### Style Object
```jsx
import { styled } from "solid-styled-components";
const Btn = styled("button")(props => ({
borderRadius: props.size + "px"
}));
;
```
### `css`
- `@returns {String}` Returns the className.
To create a className, you need to call `css` with your style rules in a tagged template:
```jsx
import { css } from "solid-styled-components";
const BtnClassName = css`
border-radius: 4px;
`;
const App =>
```
Or an object:
```js
import { css } from "solid-styled-components";
const BtnClassName = css({ borderRadius: "4px" })
const App =>
```
#### Passing props to `css` tagged templates
```js
import { css } from "solid-styled-components";
// JSX
const CustomButton = props => (
);
```
### `extractCss(target?)`
- `@returns {String}`
Returns the ``;
// Note: To be able to `hydrate` the styles you should use the proper `id` so `goober` can pick it up and use it as the target from now on
```
### `createGlobalStyles`
For a global style component, you call `createGlobalStyles` with your global tagged template.
```js
import { createGlobalStyles } from "solid-styled-components";
const GlobalStyles = () => {
const Styles = createGlobalStyles`
html,
body {
background: light;
}
* {
box-sizing: border-box;
}
`;
return ;
};
```
### `Theme`
You can set a Theme Provider (remember to use state or signals if you want it to be reactive)
```jsx
import { styled, ThemeProvider } from "solid-styled-components";
const theme = {
colors: {
primary: "hotpink"
}
};
const SomeText = styled("div")`
color: ${props => props.theme.colors.primary};
`;
render(
() => (
some text
),
document.getElementById("app")
);
```
The library provides a `useTheme` hook if you wish to use it elsewhere like in you `css` functions.
### `setup(prefixer: (key: string, value: any) => string)`
Set up a custom prefixer.