Solid Styled Components


This library provides Styled Components and css helper found in popular JS in CSS libraries. This library uses goober a 1kb style library with a wrapper to work with Solid's API. The wrapper also adds a Theming solution.

Features

$3

- @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.class} {
color: black;
}
;
`

#### Style Object

`jsx
import { styled } from "solid-styled-components";

const Btn = styled("button")(props => ({
borderRadius: props.size + "px"
}));

;
`

$3

- @returns {String} Returns the class.

To create a class, you need to call css with your style rules in a tagged template:

`jsx
import { css } from "solid-styled-components";

const BtnClass = css
border-radius: 4px;
;

const App => click
`

Or an object:

`js
import { css } from "solid-styled-components";

const BtnClass = css({ borderRadius: "4px" })

const App => click
`

#### Passing props to css tagged templates

`js
import { css } from "solid-styled-components";

// JSX
const CustomButton = props => (
class={css
border-radius: ${props.size}px;
}
>
click

);
`

$3

- @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
`

$3

- @returns {String}

Add keyframe animations to a style component.

`js
const rotate = keyframes
100% {
transform:rotate(360deg);
}

const LoadingIcon = styled.img
animation: ${ rotate } 1s linear infinite;

`

$3

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 ;
};
`

$3

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.

$3

Use setup to set up a custom prefixer.

`ts
setup(
prefixer: null | ((key: string, value: any) => string)
shouldForwardProp?: null | ((props: string[]) => string[])
)
`

$3

To prevent unwanted props attaching to the generated HTML, you can use the shouldForwardProp helper:

`ts
import { shouldForwardProp } from "solid-styled-components";

setup(null, shouldForwardProp(prop => {
return prop !== "foo";
}));
`

This will prevent the foo prop from appearing as an HTML attribute.

Note: Be careful not to filter out props such as children or onClick this way; these are already handled internally.

Using ThemeProvider in TypeScript

Before you can effectively start to use the ThemeProvider in TypeScript you will have to do a little bit of configuration.

$3

TypeScript definitions for solid-styled-components can be extended by using declaration merging.

The first step is to create a declarations file. For example, let's name it styled.d.ts:

`typescript
// import original module declarations
import "solid-styled-components";

// and extend them!
declare module "solid-styled-components" {
export interface DefaultTheme {
colors: {
primary: string;
};
}
}
`

DefaultTheme is being used as an interface of props.theme out of the box. By default the interface DefaultTheme is empty so that's why we need to extend it.

Now we can create a theme just by using the DefaultTheme declared at the step above.

`tsx
import { styled, ThemeProvider, DefaultTheme } from "solid-styled-components";

const theme: DefaultTheme = {
colors: {
primary: "hotpink"
}
};

const SomeText = styled("div")
color: ${props => props.theme.colors.primary};
;

render(
() => (

some text

),
document.getElementById("app")
);
``