Radix 首页
WorkOS 出品
Radix 首页
WorkOS 出品
主题主题PrimitivesPrimitives图标图标颜色颜色
文档案例研究博客
指南

样式

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 primitive 组件。

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

扩展 primitive

扩展 primitive 的方式与扩展任何 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 属性。

上一篇发布
下一篇动画
在 GitHub 上编辑此页。