@twilentui/style v1.0.27

@twilentui/style

Installation

yarn add @twilentui/style

Declare Provider

import { StyledProvider } from "@twilentui/style";

<StyledProvider>/* ... */</StyledProvider>;

Basic Usage

import { tw, twilent } from "@twilentui/style";

Function

const Button = twilent("button", {
  style: () => `background-color: #000;color:#fff;`,
});

export const CustomButton = (props: ButtonProps) => {
  const [count, setCount] = useState(0);

  return (
    <Button
      id="example-button"
      px="2rem"
      py="1.5rem"
      onClick={() => setCount(count + 1)}
      {...props}
    >
      {props.text} {count}
    </Button>
  );
};

Component

export const CustomButton = (props: ButtonProps) => {
  const [count, setCount] = useState(0);

  return (
    <tw.button
      id="example-button"
      px="2rem"
      py="1.5rem"
      onClick={() => setCount(count + 1)}
      bgColor="#000"
      color="#fff"
      {...props}
    >
      {props.text} {count}
    </tw.button>
  );
};

Rendered HTML

<button id="example-button" class="css-1y3oax1-twilent">
  Clicked this many times: 0
</button>

Rendered Stylesheet

.css-1y3oax1-twilent {
  padding-top: 1.5rem;
  padding-right: 2rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  background-color: red;
}