条件样式

了解如何在 Chakra 中使用条件样式和响应式样式。

概述

¥Overview

Chakra 允许你使用条件样式属性为伪状态、媒体查询和自定义数据属性编写样式。

¥Chakra allows you to write styles for pseudo states, media queries, and custom data attributes with the conditional style props.

note

请参阅下面的内置条件列表。

¥See the list of built-in conditions below.

用法

¥Usage

例如，以下是如何在鼠标悬停时更改按钮的背景颜色：

¥For example, here's how to change the background color of a button when it's hovered:

<Box bg="red.500" _hover={{ bg: "red.700" }}>
  Hover me
</Box>

嵌套条件

¥Nested condition

可以嵌套条件值以创建复杂的选择器规则。

¥Conditional values can be nested to create complex selector rules.

以下是如何在鼠标悬停时更改元素的背景颜色：

¥Here's how to change the background color of an element when in focus on hover:

<Box bg={{ base: "red.500", _hover: { _focus: "red.700" }}}>
  Hover & Focus me
</Box>

At 规则

¥At Rules

这也适用于支持的 @ 规则（@media、@layer、@container、@supports 和 @page）：

¥This also works with the supported at-rules (@media, @layer, @container, @supports, and @page):

<Box
  css={{
    "@container (min-width: 10px)": {
      color: "green.300",
    },
  }}
>
  Hello
</Box>

伪类

¥Pseudo Classes

悬停、活动、聚焦和禁用

¥Hover, Active, Focus, and Disabled

以下是如何设置元素的悬停、活动、焦点和禁用状态样式的示例。

¥Here's an example of how to style the hover, active, focus, and disabled states of an element

<chakra.button
  _hover={{ bg: "red.700" }}
  _active={{ bg: "red.900" }}
  _focus={{ bg: "red.800" }}
  _disabled={{ opacity: "0.5" }}
>
  Hover me > Hover me
</chakra.button>

首行、末行、奇数、偶数

¥First, Last, Odd, Even

以下是如何设置列表中第一个、最后一个、奇数和偶数元素样式的示例。

¥Here's an example of how to style the first, last, odd, and even elements in a list

<Box as="ul">
  {items.map((item) => (
    <Box
      as="li"
      key={item}
      _first={{ color: "red.500" }}
      _last={{ color: "red.800" }}
    >
      {item}
    </Box>
  ))}
</Box>

你还可以使用 _even 和 _odd 修饰符为偶数和奇数元素设置样式。

¥You can also style even and odd elements using the _even and _odd modifier

<table>
  <tbody>
    {items.map((item) => (
      <chakra.tr key={item} _even={{ bg: "gray.100" }} _odd={{ bg: "white" }}>
        <td>{item}</td>
      </chakra.tr>
    ))}
  </tbody>
</table>

伪元素

¥Pseudo Elements

前后对比

¥Before and After

要设置元素的 ::before 和 ::after 伪元素的样式，请使用 _before 和 _after 修饰符。

¥To style the ::before and ::after pseudo elements of an element, use the _before and _after modifiers

<Box _before={{ content: '"👋"' }} _after={{ content: '"🥂"' }}>
  Hello
</Box>

占位符

¥Placeholder

要设置任何输入框或文本区域的占位符文本的样式，请使用 _placeholder 修饰符：

¥To style the placeholder text of any input or textarea, use the _placeholder modifier:

<chakra.input
  placeholder="Enter your name"
  _placeholder={{ color: "gray.500" }}
/>

文件输入

¥File Inputs

要设置文件输入按钮的样式，请使用 _file 修饰符：

¥To style the file input button, use the _file modifier:

<chakra.input
  type="file"
  _file={{ bg: "gray.500", px: "4", py: "2", marginEnd: "3" }}
/>

媒体查询

¥Media Queries

减少运动

¥Reduced Motion

使用 _motionReduce 和 _motionSafe 修饰符，根据用户的运动偏好设置元素样式：

¥Use the _motionReduce and _motionSafe modifiers to style an element based on the user's motion preference:

<Box _motionSafe={{ transition: "all 0.3s" }}>Hello</Box>

配色方案

¥Color Scheme

prefers-color-scheme 媒体功能用于检测用户是否已请求系统使用浅色或深色主题。

¥The prefers-color-scheme media feature is used to detect if the user has requested the system to use a light or dark color theme.

使用 _osLight 和 _osDark 修饰符，根据用户的颜色方案偏好设置元素样式：

¥Use the _osLight and _osDark modifiers to style an element based on the user's color scheme preference:

<chakra.div bg={{ base: "white", _osDark: "black" }}>Hello</chakra.div>

颜色对比度

¥Color Contrast

prefers-contrast 媒体功能用于检测用户是否请求系统使用高对比度或低对比度主题。

¥The prefers-contrast media feature is used to detect if the user has requested the system use a high or low contrast theme.

使用 _highContrast 和 _lessContrast 修饰符，根据用户的颜色对比度偏好设置元素样式：

¥Use the _highContrast and _lessContrast modifiers to style an element based on the user's color contrast preference:

<Box bg={{ base: "white", _highContrast: "black" }}>Hello</Box>

方向

¥Orientation

orientation 媒体功能用于检测用户的设备处于纵向模式还是横向模式。

¥The orientation media feature is used to detect if the user has a device in portrait or landscape mode.

使用 _portrait 和 _landscape 修饰符，根据用户设备方向设置元素样式：

¥Use the _portrait and _landscape modifiers to style an element based on the user's device orientation:

<Box pb="4" _portrait={{ pb: "8" }}>
  Hello
</Box>

选择器

¥Selectors

任意选择器

¥Arbitrary selectors

对于任意选择器，可以使用 css 属性来编写样式：

¥For arbitrary, use the css prop to write styles for one-off selectors:

<Box css={{ "&[data-state=closed]": { color: "red.300" }}} />

以下是另一个以父元素的子元素为目标的示例：

¥Here's another example that targets the child elements of a parent element:

<Box
  css={{
    "& > *": { margin: "2" },
  }}
/>

组选择器

¥Group Selectors

要根据父元素的状态或属性设置元素样式，请将 group 类添加到父元素，并在子元素上使用任意 _group* 修饰符。

¥To style an element based on its parent element's state or attribute, add the group class to the parent element, and use any of the _group* modifiers on the child element.

<div className="group">
  <Text _groupHover={{ bg: "red.500" }}>Hover me</Text>
</div>

此修饰符适用于所有伪类修饰符，例如 _groupHover、_groupActive、_groupFocus 和 _groupDisabled 等。

¥This modifier works for every pseudo class modifiers like _groupHover, _groupActive, _groupFocus, and _groupDisabled, etc.

兄弟元素选择器

¥Sibling Selectors

要根据同级元素的状态或属性设置元素样式，请将 peer 类添加到同级元素，并在目标元素上使用任意 _peer* 修饰符。

¥To style an element based on its sibling element's state or attribute, add the peer class to the sibling element, and use any of the _peer* modifiers on the target element.

<div>
  <p className="peer">Hover me</p>
  <Box _peerHover={{ bg: "red.500" }}>I'll change by bg</Box>
</div>

注意：此修饰符仅适用于标有 peer 的元素是其之前的同级元素，即它位于你想要启动的元素之前。

数据属性

¥Data Attribute

LTR 和 RTL

¥LTR and RTL

要根据文本方向设置元素样式，请使用 _ltr 和 _rtl 修饰符。

¥To style an element based on the direction of the text, use the _ltr and _rtl modifiers

<div dir="ltr">
  <Box _ltr={{ ml: "3" }} _rtl={{ mr: "3" }}>
    Hello
  </Box>
</div>

状态

¥State

要根据元素的 data-{state} 属性设置样式，请使用相应的 _{state} 修饰符。

¥To style an element based on its data-{state} attribute, use the corresponding _{state} modifier

<Box data-loading _loading={{ bg: "gray.500" }}>
  Hello
</Box>

这适用于常见状态，例如 data-active、data-disabled、data-focus、data-hover、data-invalid、data-required 和 data-valid。

¥This works for common states like data-active, data-disabled, data-focus, data-hover, data-invalid, data-required, and data-valid.

<Box data-active _active={{ bg: "gray.500" }}>
  Hello
</Box>

方向

¥Orientation

要根据元素的 data-orientation 属性设置样式，请使用 _horizontal 和 _vertical 修饰符。

¥To style an element based on its data-orientation attribute, use the _horizontal and _vertical modifiers

<Box
  data-orientation="horizontal"
  _horizontal={{ bg: "red.500" }}
  _vertical={{ bg: "blue.500" }}
>
  Hello
</Box>

ARIA 属性

¥ARIA Attribute

要根据元素的 aria-{state}=true 属性设置元素样式，请使用相应的 _{state} 属性。

¥To style an element based on its aria-{state}=true attribute, use the corresponding _{state} prop

<Box aria-expanded="true" _expanded={{ bg: "gray.500" }}>
  Hello
</Box>

参考

¥Reference

以下是你可以在 Chakra 中使用的所有条件属性的列表：

¥Here's a list of all the condition props you can use in Chakra:

Condition name	Selector
`_hover`	`@media (hover: hover)&:is(:hover, [data-hover]):not(:disabled, [data-disabled])`
`_active`	`&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])`
`_focus`	`&:is(:focus, [data-focus])`
`_focusWithin`	`&:is(:focus-within, [data-focus-within])`
`_focusVisible`	`&:is(:focus-visible, [data-focus-visible])`
`_disabled`	`&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])`
`_visited`	`&:visited`
`_target`	`&:target`
`_readOnly`	`&:is([data-readonly], [aria-readonly=true], [readonly])`
`_readWrite`	`&:read-write`
`_empty`	`&:is(:empty, [data-empty])`
`_checked`	`&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])`
`_enabled`	`&:enabled`
`_expanded`	`&:is([aria-expanded=true], [data-expanded], [data-state=expanded])`
`_highlighted`	`&[data-highlighted]`
`_complete`	`&[data-complete]`
`_incomplete`	`&[data-incomplete]`
`_dragging`	`&[data-dragging]`
`_before`	`&::before`
`_after`	`&::after`
`_firstLetter`	`&::first-letter`
`_firstLine`	`&::first-line`
`_marker`	`&::marker`
`_selection`	`&::selection`
`_file`	`&::file-selector-button`
`_backdrop`	`&::backdrop`
`_first`	`&:first-of-type`
`_last`	`&:last-of-type`
`_notFirst`	`&:not(:first-of-type)`
`_notLast`	`&:not(:last-of-type)`
`_only`	`&:only-child`
`_even`	`&:nth-of-type(even)`
`_odd`	`&:nth-of-type(odd)`
`_peerFocus`	`.peer:is(:focus, [data-focus]) ~ &`
`_peerHover`	`.peer:is(:hover, [data-hover]):not(:disabled, [data-disabled]) ~ &`
`_peerActive`	`.peer:is(:active, [data-active]):not(:disabled, [data-disabled]) ~ &`
`_peerFocusWithin`	`.peer:focus-within ~ &`
`_peerFocusVisible`	`.peer:is(:focus-visible, [data-focus-visible]) ~ &`
`_peerDisabled`	`.peer:is(:disabled, [disabled], [data-disabled]) ~ &`
`_peerChecked`	`.peer:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) ~ &`
`_peerInvalid`	`.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &`
`_peerExpanded`	`.peer:is([aria-expanded=true], [data-expanded], [data-state=expanded]) ~ &`
`_peerPlaceholderShown`	`.peer:placeholder-shown ~ &`
`_groupFocus`	`.group:is(:focus, [data-focus]) &`
`_groupHover`	`.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &`
`_groupActive`	`.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &`
`_groupFocusWithin`	`.group:focus-within &`
`_groupFocusVisible`	`.group:is(:focus-visible, [data-focus-visible]) &`
`_groupDisabled`	`.group:is(:disabled, [disabled], [data-disabled]) &`
`_groupChecked`	`.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &`
`_groupExpanded`	`.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &`
`_groupInvalid`	`.group:invalid &`
`_indeterminate`	`&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])`
`_required`	`&:is([data-required], [aria-required=true])`
`_valid`	`&:is([data-valid], [data-state=valid])`
`_invalid`	`&:is([data-invalid], [aria-invalid=true], [data-state=invalid])`
`_autofill`	`&:autofill`
`_inRange`	`&:is(:in-range, [data-in-range])`
`_outOfRange`	`&:is(:out-of-range, [data-outside-range])`
`_placeholder`	`&::placeholder, &[data-placeholder]`
`_placeholderShown`	`&:is(:placeholder-shown, [data-placeholder-shown])`
`_pressed`	`&:is([aria-pressed=true], [data-pressed])`
`_selected`	`&:is([aria-selected=true], [data-selected])`
`_grabbed`	`&:is([aria-grabbed=true], [data-grabbed])`
`_underValue`	`&[data-state=under-value]`
`_overValue`	`&[data-state=over-value]`
`_atValue`	`&[data-state=at-value]`
`_default`	`&:default`
`_optional`	`&:optional`
`_open`	`&:is([open], [data-open], [data-state=open])`
`_closed`	`&:is([closed], [data-closed], [data-state=closed])`
`_fullscreen`	`&:is(:fullscreen, [data-fullscreen])`
`_loading`	`&:is([data-loading], [aria-busy=true])`
`_hidden`	`&:is([hidden], [data-hidden])`
`_current`	`&[data-current]`
`_currentPage`	`&[aria-current=page]`
`_currentStep`	`&[aria-current=step]`
`_today`	`&[data-today]`
`_unavailable`	`&[data-unavailable]`
`_rangeStart`	`&[data-range-start]`
`_rangeEnd`	`&[data-range-end]`
`_now`	`&[data-now]`
`_topmost`	`&[data-topmost]`
`_motionReduce`	`@media (prefers-reduced-motion: reduce)`
`_motionSafe`	`@media (prefers-reduced-motion: no-preference)`
`_print`	`@media print`
`_landscape`	`@media (orientation: landscape)`
`_portrait`	`@media (orientation: portrait)`
`_dark`	`.dark &, .dark .chakra-theme:not(.light) &`
`_light`	`:root &, .light &`
`_osDark`	`@media (prefers-color-scheme: dark)`
`_osLight`	`@media (prefers-color-scheme: light)`
`_highContrast`	`@media (forced-colors: active)`
`_lessContrast`	`@media (prefers-contrast: less)`
`_moreContrast`	`@media (prefers-contrast: more)`
`_ltr`	`[dir=ltr] &`
`_rtl`	`[dir=rtl] &`
`_scrollbar`	`&::-webkit-scrollbar`
`_scrollbarThumb`	`&::-webkit-scrollbar-thumb`
`_scrollbarTrack`	`&::-webkit-scrollbar-track`
`_horizontal`	`&[data-orientation=horizontal]`
`_vertical`	`&[data-orientation=vertical]`
`_icon`	`& :where(svg)`
`_starting`	`@starting-style`

自定义

¥Customization

Chakra 允许你创建自己的条件，因此你不受默认预设的限制。了解更多关于自定义条件此处的信息。

¥Chakra lets you create your own conditions, so you're not limited to the ones in the default preset. Learn more about customizing conditions here.

颜色不透明度修改器

虚拟颜色

条件样式

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}概述

概述