条件付きスタイル

Yamada UIは、条件に応じたスタイルを適用する機能を提供しています。

概要

条件付きスタイルを使用することで、擬似要素、擬似クラス、セレクターのスタイルを適用できます。

擬似要素

::beforeの擬似要素にスタイルを適用するには、_beforeを使用します。

Box

<Box
  bg="bg.contrast"
  color="fg.contrast"
  m="md"
  p="md"
  position="relative"
  _before={{
    bg: "success",
    color: "white",
    content: "'before'",
    left: "-md",
    p: "md",
    position: "absolute",
    top: "-md",
  }}
>
  Box
</Box>

利用可能な擬似要素はこちらをご覧ください。

擬似クラス

:hoverの擬似クラスにスタイルを適用するには、_hoverを使用します。

Hover me

<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", _hover: "success" }}>
  Hover me
</Box>

複数の値をまとめて適用することもできます。

Hover me

<Box
  p="md"
  color="fg.contrast"
  bg="bg.contrast"
  _hover={{ bg: "success", color: "white" }}
>
  Hover me
</Box>

複数の条件を組み合わせることもできます。

Hover and focus me

<Box
  p="md"
  tabIndex={0}
  color="fg.contrast"
  bg="bg.contrast"
  _hover={{ _focus: { bg: "success" } }}
>
  Hover and focus me
</Box>

利用可能な擬似クラスはこちらをご覧ください。

セレクター

data-orientationの属性に基づいてスタイルを適用するには、_horizontalもしくは_verticalを使用します。

horizontal

<Box
  p="md"
  color="white"
  data-orientation="horizontal"
  _horizontal={{ bg: "success" }}
  _vertical={{ bg: "warning" }}
>
  horizontal
</Box>

利用可能なセレクターはこちらをご覧ください。

グループセレクター

親要素の状態または属性に基づいて要素にスタイルを適用するには、親要素にroleの"group"または"data-group"を追加して、子要素に_group*の条件付きスタイルを使用します。

Hover me

<Box role="group" p="md" bg="bg.subtle">
  <Text _groupHover={{ color: "success" }}>Hover me</Text>
</Box>

利用可能なグループセレクターはこちらをご覧ください。

兄弟セレクター

兄弟要素の状態または属性に基づいて要素にスタイルを適用するには、兄弟要素にdata-peerを追加して、_peer*の条件付きスタイルを使用します。

Focus the peer

Focus me!

<HStack>
  <Center
    bg="bg.contrast"
    color="fg.contrast"
    p="md"
    _peerFocus={{ bg: "success" }}
  >
    Focus the peer
  </Center>

  <Center data-peer bg="bg.subtle" p="md" tabIndex={0}>
    Focus me!
  </Center>
</HStack>

利用可能な兄弟セレクターはこちらをご覧ください。

任意のセレクター

任意のセレクターを使用する場合は、cssを使用してスタイルを適用します。

Closed

<Box
  p="md"
  color="white"
  css={{ "&[data-state=closed]": { bg: "success" } }}
  data-state="closed"
>
  Closed
</Box>