样式

Radix Primitives 是无样式的——并且与任何样式解决方案兼容——让您对样式有完全的控制权。

样式概述

功能样式

您可以控制所有样式方面，包括功能样式。例如——默认情况下——一个 Dialog Overlay 不会覆盖整个视口。您需要负责添加这些样式，以及任何演示样式。

类

所有组件及其部分接受一个 className 属性。这个类将传递到 DOM 元素。您可以像预期的那样在 CSS 中使用它。

数据属性

当组件是有状态的，它们的状态将在 data-state 属性中暴露。例如，当一个 Accordion Item 被打开时，它会包含一个 data-state="open" 属性。

使用 CSS 样式

样式一个部分

您可以通过定位您提供的 className 来样式化组件部分。

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;

样式一个状态

您可以通过定位其 data-state 属性来样式化组件状态。

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

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

使用 CSS-in-JS 样式

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

样式一个部分

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

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;

样式一个状态

您可以通过定位其 data-state 属性来样式化组件状态。

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;
	}
`;

扩展原语

扩展原语的方式与扩展任何 React 组件的方式相同。

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";

总结

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

为了方便，有状态的组件包含一个 data-state 属性。

上一篇版本发布 Releases

下一篇动画 Animation

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

样式