styled

styled関数は、propsを使用してスタイリングを可能にするJSX要素を生成します。

概要

styledは、Style Propsを有効にしたJSX要素のオブジェクトであり、カスタムコンポーネントがStyle Propsを受け取るための関数としても使用できます。

使い方

styled.<element>の記法を使用して、Style Propsを備えたHTML要素を生成します。

例えば、Style Propsを備えたHTML要素のbuttonを生成する場合は、<ui.button />と記述します。

<styled.button />

コンポーネントを作成する

styledは、JSX要素の<styled.div />とJSX要素を返す関数のstyled('div')と2つの使い方ができます。

関数は、簡単なコンポーネントを生成するのに適しています。

import { styled } from "@workspaces/ui"

const Button = styled("button")

const App = () => {
  return <Button>Click me!</Button>
}

引数にカスタムコンポーネントを渡し、Style Propsを有効にしたカスタムコンポーネントを生成することもできます。

import { styled } from "@workspaces/ui"
import { YourComponent } from "./your-component"

const NewComponent = styled(YourComponent)

const App = () => {
  return <NewComponent fontSize="lg" />
}

スタイリングする

コンポーネントにデフォルトのスタイルを設定したり、variantやsizeなどの条件に応じたスタイルを設定することができます。

ベーススタイル

ベーススタイルは、コンポーネントのデフォルトのスタイルを設定します。

const Button = styled("button", {
  base: {
    alignItems: "center",
    appearance: "none",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    justifyContent: "center",
    overflow: "hidden",
    position: "relative",
    rounded: "l2",
    transitionDuration: "moderate",
    transitionProperty: "common",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _readOnly: { layerStyle: "readOnly" },
    _disabled: { layerStyle: "disabled" },
  },
})

バリアントスタイル

バリアントスタイルは、コンポーネントのvariantに応じたスタイルを設定します。

const Button = styled("button", {
  variants: {
    outline: {
      layerStyle: "outline",
      _hover: { layerStyle: "outline.hover" },
    },
    solid: {
      layerStyle: "solid",
      _hover: { layerStyle: "solid.hover" },
    },
    subtle: {
      layerStyle: "subtle",
      _hover: { layerStyle: "subtle.hover" },
    },
  },
})

バリアントスタイルを適用する場合は、variantに値を設定します。

<Button variant="solid" />

または、defaultPropsのvariantに値を設定します。

const Button = styled("button", {
  defaultProps: {
    variant: "solid",
  },
})

サイズスタイル

サイズスタイルは、コンポーネントのsizeに応じたスタイルを設定します。

const Button = styled("button", {
  sm: {
    fontSize: "sm",
    gap: "2",
    h: "9",
    lineHeight: "{sizes.9}",
    minW: "9",
    px: "3",
    _icon: { fontSize: "md" },
  },
  md: {
    fontSize: "md",
    gap: "2",
    h: "10",
    lineHeight: "{sizes.10}",
    minW: "10",
    px: "3",
    _icon: { fontSize: "lg" },
  },
  lg: {
    fontSize: "lg",
    gap: "2.5",
    h: "11",
    lineHeight: "{sizes.11}",
    minW: "11",
    px: "4",
    _icon: { fontSize: "2xl" },
  },
})

サイズスタイルを適用する場合は、sizeに値を設定します。

<Button size="sm" />

または、defaultPropsのsizeに値を設定します。

const Button = styled("button", {
  defaultProps: {
    size: "sm",
  },
})

プロップススタイル

プロップススタイルは、コンポーネントのpropsに応じたスタイルを設定します。

const Button = styled("button", {
  props: {
    fullRounded: {
      true: { rounded: "full" },
    },
  },
})

プロップススタイルを適用する場合は、設定したpropsに値を設定します。

<Button fullRounded />

または、defaultPropsの設定したpropsに値を設定します。

const Button = styled("button", {
  defaultProps: {
    fullRounded: true,
  },
})

コンポジットスタイル

コンポジットスタイルは、コンポーネントのバリアントスタイルやサイズスタイルなど、複数の条件に応じたスタイルを設定します。

これは、variantが"solid"かつfullRoundedがtrueの場合に、追加のスタイルを設定する例です。

const Button = styled("button", {
  compounds: [
    {
      variant: "solid",
      fullRounded: true,
      css: {
        /* Additional styles */
      },
    },
  ],
})

配列を設定することで、複数の条件にマッチングします。これは、variantが"solid"または"subtle"かつfullRoundedがtrueの場合に、追加のスタイルを設定する例です。

const Button = styled("button", {
  compounds: [
    {
      variant: ["solid", "subtle"],
      fullRounded: true,
      css: {
        /* Additional styles */
      },
    },
  ],
})

正規表現を使用することも可能です。

const Button = styled("button", {
  compounds: [
    {
      variant: /^solid|subtle$/,
      fullRounded: true,
      css: {
        /* Additional styles */
      },
    },
  ],
})

classNameを設定する

const Button = styled("button", {
  className: "button",
})

displayNameを設定する

const Button = styled("button", {
  displayName: "Button",
})

propsを転送する

styledは、Style Propsをフィルタリングして、提供されたコンポーネントまたはHTML要素にpropsを転送します。どのpropsを転送するかを設定する場合は、forwardPropsまたはshouldForwardPropを設定します。

例えば、YourComponentにtransitionを転送する場合は、forwardPropsに["transition"]を設定します。これは、Style PropsとYourComponentのpropsが競合した場合に有効な手段です。

const Button = styled(YourComponent, {
  forwardProps: ["transition"],
})