アットルール

Yamada UIは、CSSのアットルールをサポートしています。

概要

Style Propsを使用することで、CSSのアットルールを設定できます。

@media

@mediaを使い、特定の条件にスタイルを適用するには、_mediaを使用します。

Print me

<Center
  borderWidth="1px"
  boxSize="4xs"
  p="md"
  _media={[{ type: "print", css: { color: "success" } }]}
>
  <Text>Print me</Text>
</Center>

printなど一部のメディア種別は、便利なショートハンドを用意しています。

Print me

<Center borderWidth="1px" boxSize="4xs" p="md" _print={{ color: "success" }}>
  <Text>Print me</Text>
</Center>

利用可能な@mediaはこちらをご覧ください。

複数のクエリを使う

複数のクエリを使う場合は、配列内に複数の値を設定します。

Box

<Box
  w="full"
  p="md"
  color="fg.contrast"
  bg="bg.contrast"
  _media={[
    { maxW: "1440px", css: { bg: "success" } },
    { minW: "481px", maxW: "1280px", css: { bg: "warning" } },
    { maxW: "480px", css: { bg: "danger" } },
  ]}
>
  Box
</Box>

任意のクエリを使う

任意のクエリを使う場合は、queryを使用します。

Box

<Box
  w="full"
  p="md"
  color="fg.contrast"
  bg="bg.contrast"
  _media={[
    {
      query: "(min-width: 977px) and (max-width: 1440px)",
      css: { bg: "success" },
    },
  ]}
>
  Box
</Box>

@container

@containerを使い、特定のコンテナのサイズや条件に基づいてスタイルを適用するには、_containerを使用します。

Resize me

<Center
  containerType="inline-size"
  p="md"
  borderWidth="1px"
  resize="horizontal"
  overflow="auto"
  boxSize="4xs"
>
  <Text
    _container={[{ minW: "320px", maxW: "560px", css: { color: "success" } }]}
  >
    Resize me
  </Text>
</Center>

コンテナ名を指定する

Resize me

<Center
  containerName="parent"
  containerType="size"
  p="md"
  borderWidth="1px"
  resize="both"
  overflow="auto"
  boxSize="2xs"
>
  <Center
    containerName="child"
    containerType="size"
    p="md"
    borderWidth="1px"
    resize="both"
    overflow="auto"
    boxSize="4xs"
  >
    <Text
      _container={[
        {
          name: "parent",
          orientation: "portrait",
          css: { color: "success" },
        },
        { name: "child", orientation: "landscape", css: { color: "danger" } },
      ]}
    >
      Resize me
    </Text>
  </Center>
</Center>

@supports

@supportsを使い、条件に基づいてスタイルを適用するには、_supportsを使用します。

Supported flex

<Box
  _supports={[
    {
      css: {
        color: "success",
      },
      query: "(display: flex)",
    },
  ]}
>
  <Text>Supported flex</Text>
</Box>

@keyframes

@keyframesを使い、アニメーションの中間状態を適用するには、_keyframesを使用します。

Box

<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
>
  Box
</Box>

アニメーションは、別にドキュメントがあります。詳しくは、アニメーションをご覧ください。

任意のアットルール

任意のアットルールを使用する場合は、cssを使用してスタイルを適用します。

<Box
  css={{
    "@<identifier> (RULE)": {
      // Define the style you want to customize.
    },
  }}
>
  Box
</Center>