solid-css

A styling tool when using solidjs to custom components

usage

css

import { Component, createSignal } from "solid-js";
import { css, StyleProvider } from "solid-css";

const className = css`
  color: red;
`;

const Child: Component<{ name: string }> = ({ name }) => {
  return (
    <div>
      My name is <span class={className()}>{name}</span>
    </div>
  );
};

export const App: Component<{ name: string }> = ({ name }) => {
  return (
    <StyleProvider>
      <Child name="Tom" />
    </StyleProvider>
  );
};

createGlobalStyles

import { Component } from "solid-js";
import { createGlobalStyles, StyleProvider } from "solid-css";

const getGlobalStyles = createGlobalStyles`
  span {
    color: green;
  }
`;

const Child: Component<{ name: string }> = ({ name }) => {
  getGlobalStyles();

  return (
    <div>
      My name is <span>{name}</span>
    </div>
  );
};

export const Global: Component<{ name: string }> = ({ name }) => {
  return (
    <StyleProvider>
      <Child name={name} />
    </StyleProvider>
  );
};