样式

¥Styling

Radix Primitives 无需样式，并且兼容任何样式解决方案，让你可以完全控制样式。

样式概述

¥Styling overview

功能样式

¥Functional styles

你可以控制样式的各个方面，包括功能性样式。例如，默认情况下，对话框覆盖 不会覆盖整个视口。你负责添加这些样式以及任何演示样式。

¥You are in control of all aspects of styling, including functional styles. For example—by default—a Dialog Overlay won't cover the entire viewport. You're responsible for adding those styles, plus any presentation styles.

类

¥Classes

所有组件及其组件都接受 className prop。此类将传递给 DOM 元素。你可以按预期在 CSS 中使用它。

¥All components and their parts accept a className prop. This class will be passed through to the DOM element. You can use it in CSS as expected.

数据属性

¥Data attributes

当组件有状态时，其状态将在 data-state 属性中公开。例如，打开 手风琴项目 时，它包含一个 data-state="open" 属性。

¥When components are stateful, their state will be exposed in a data-state attribute. For example, when an Accordion Item is opened, it includes a data-state="open" attribute.

使用 CSS 样式

¥Styling with CSS

部分样式

¥Styling a part

你可以通过定位你提供的 className 来设置组件部分的样式。

¥You can style a component part by targeting the className that you provide.

import * as React from "react";
import { Accordion } from "radix-ui";
import "./styles.css";

const AccordionDemo = () => (
	<Accordion.Root>
		<Accordion.Item className="AccordionItem" value="item-1" />
		{/* … */}
	</Accordion.Root>
);

export default AccordionDemo;

状态样式

¥Styling a state

你可以通过定位组件的 data-state 属性来设置其状态样式。

¥You can style a component state by targeting its data-state attribute.

.AccordionItem {
	border-bottom: 1px solid gainsboro;
}

.AccordionItem[data-state="open"] {
	border-bottom-width: 2px;
}

使用 CSS-in-JS 样式

¥Styling with CSS-in-JS

下面的示例使用的是 styled-components，但你可以使用任何你选择的 CSS-in-JS 库。

¥The examples below are using styled-components, but you can use any CSS-in-JS library of your choice.

部分样式

¥Styling a part

大多数 CSS-in-JS 库都导出一个用于传递组件及其样式的函数。你可以直接提供 Radix 基础组件组件。

¥Most CSS-in-JS libraries export a function for passing components and their styles. You can provide the Radix primitive component directly.

import * as React from "react";
import { Accordion } from "radix-ui";
import styled from "styled-components";

const StyledItem = styled(Accordion.Item)`
  border-bottom: 1px solid gainsboro;
`;

const AccordionDemo = () => (
	<Accordion.Root>
		<StyledItem value="item-1" />
		{/* … */}
	</Accordion.Root>
);

export default AccordionDemo;

状态样式

¥Styling a state

你可以通过定位组件的 data-state 属性来设置其状态样式。

¥You can style a component state by targeting its data-state attribute.

import { Accordion } from "radix-ui";
import styled from "styled-components";

const StyledItem = styled(Accordion.Item)`
	border-bottom: 1px solid gainsboro;

	&[data-state="open"] {
		border-bottom-width: 2px;
	}
`;

扩展基础组件

¥Extending a primitive

扩展基础组件的方式与扩展任何 React 组件的方式相同。

¥Extending a primitive is done the same way you extend any React component.

import * as React from "react";
import { Accordion as AccordionPrimitive } from "radix-ui";

const AccordionItem = React.forwardRef<
	React.ElementRef<typeof AccordionPrimitive.Item>,
	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>((props, forwardedRef) => (
	<AccordionPrimitive.Item {...props} ref={forwardedRef} />
));
AccordionItem.displayName = "AccordionItem";

摘要

¥Summary

Radix Primitives 旨在封装可访问性问题和其他复杂功能，同时确保你完全掌控样式。

¥Radix Primitives were designed to encapsulate accessibility concerns and other complex functionalities, while ensuring you retain complete control over styling.

为方便起见，有状态组件包含 data-state 属性。

¥For convenience, stateful components include a data-state attribute.