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
styled(tagName)
@param {String} tagNameThe name of the dom element you'd like the styled to be applied to@returns {Function}Returns the tag template function.
import { styled } from "solid-styled-components";
const Btn = styled("button")`
border-radius: 4px;
`;Tagged Templates
import { styled } from "solid-styled-components";
const Btn = styled("button")`
border-radius: ${props => props.size}px;
`;
<Btn size={20} />;Function returns a string
import { styled } from "solid-styled-components";
const Btn = styled("button")(
props => `
border-radius: ${props.size}px;
`
);
<Btn size={20} />;Nesting styled components
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
import { styled } from "solid-styled-components";
const Btn = styled("button")(props => ({
borderRadius: props.size + "px"
}));
<Btn size={20} />;css
@returns {String}Returns the className.
To create a className, you need to call css with your style rules in a tagged template:
import { css } from "solid-styled-components";
const BtnClassName = css`
border-radius: 4px;
`;
const App => <button className={BtnClassName}>click</button>Or an object:
import { css } from "solid-styled-components";
const BtnClassName = css({ borderRadius: "4px" })
const App => <button className={BtnClassName}>click</button>Passing props to css tagged templates
import { css } from "solid-styled-components";
// JSX
const CustomButton = props => (
<button
className={css`
border-radius: ${props.size}px;
`}
>
click
</button>
);extractCss(target?)
@returns {String}
Returns the <style> tag that is rendered in a target and clears the style sheet. Defaults to <head>. Used to grab the styles for SSR.
const { extractCss } = require("goober");
// After your app has rendered, just call it:
const styleTag = `<style id="_goober">${extractCss()}</style>`;
// 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 oncreateGlobalStyles
For a global style component, you call createGlobalStyles with your global tagged template.
import { createGlobalStyles } from "solid-styled-components";
const GlobalStyles = () => {
const Styles = createGlobalStyles`
html,
body {
background: light;
}
* {
box-sizing: border-box;
}
`;
return <Styles />;
};Theme
You can set a Theme Provider (remember to use state or signals if you want it to be reactive)
import { styled, ThemeProvider } from "solid-styled-components";
const theme = {
colors: {
primary: "hotpink"
}
};
const SomeText = styled("div")`
color: ${props => props.theme.colors.primary};
`;
render(
() => (
<ThemeProvider theme={theme}>
<SomeText>some text</SomeText>
</ThemeProvider>
),
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.