At-Rules

Yamada UI supports CSS at-rules.

Overview

You can configure CSS at-rules by using Style Props.

@media

@media to apply styles based on specific conditions, use _media.

Print me

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

print and other media types have a convenient shortcut.

Print me

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

Available @media are here.

Use multiple queries

To use multiple queries, set multiple values in an array.

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>

Use arbitrary queries

To use arbitrary queries, use 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 to apply styles based on the size or conditions of a specific container, use _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>

Specify container name

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 to apply styles based on conditions, use _supports.

Supported flex

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

@keyframes

@keyframes to apply intermediate states of an animation, use _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>

Animations have their own documentation. See Animations for more details.

Arbitrary at-rules

To use arbitrary at-rules, use css.

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