Nikolay Suslov 69cdc31168 add new libs 3 年之前
..
src 69cdc31168 add new libs 3 年之前
LICENSE 69cdc31168 add new libs 3 年之前
README.md 69cdc31168 add new libs 3 年之前
package.json 69cdc31168 add new libs 3 年之前

README.md

Solid Styled Components

Build Status NPM Version

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} tagName The 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 on

createGlobalStyles

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.