Radix 首页
由 WorkOS 打造
Radix 首页
由 WorkOS 打造
主题Themes组件Primitives图标Icons颜色Colors
文档案例研究博客
指南

样式

Radix 组件库是无样式的，并且兼容任何样式解决方案，使您可以完全控制样式。

样式概述

功能样式

您可以控制样式的所有方面，包括功能样式。例如，默认情况下，对话框覆盖层 不会覆盖整个视口。您负责添加这些样式以及任何表现样式。

类名

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

数据属性

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

使用 CSS 样式化

样式化某个部分

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

import * as React from 'react';

import * as Accordion from '@radix-ui/react-accordion';

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 * as Accordion from '@radix-ui/react-accordion';

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 * as Accordion from '@radix-ui/react-accordion';

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 * as AccordionPrimitive from '@radix-ui/react-accordion';



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 组件库旨在封装无障碍问题和其他复杂功能，同时确保您保留对样式的完全控制。

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

上一页版本发布
下一页动画
在 GitHub 上编辑此页面。