覆盖样式

覆盖默认组件样式就像将你自己的类名传递给 className 或带有槽的组件的 classNames 属性一样简单。

什么是槽？

槽是组件的一部分，可以单独设置样式。例如，CircularProgress 组件有多个槽/部分可以单独设置样式，例如 track、indicator、value 等。

带有槽的组件有一个 classNames 属性，允许你单独设置每个槽的样式。

覆盖组件

让我们覆盖 Button 组件的默认样式，这是一个没有插槽的组件。

import {Button} from "@nextui-org/react";

export default function App() {
  return (
    <Button
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
      size="lg"
    >
      Press me
    </Button>
  );
}

带插槽的组件

一些 NextUI 组件有插槽，这意味着你可以使用 classNames 属性设置组件内所有部分的样式。例如，CircularProgress 组件有以下插槽

base：圆形进度条的基本插槽，它是主容器。
svgWrapper：svg 圆圈和值标签的包装器。
svg：圆圈的 svg 元素。
track：进度条的背景圆圈。
indicator：根据 value 填充的指示器。
value：值内容。
label：标签内容。

每个插槽都可以使用 classNames 属性设置样式，下面的示例展示了如何更改一些插槽的样式以创建不同样式的圆形进度条。

import {CircularProgress, Card, CardBody} from "@nextui-org/react";

export default function App() {
  return (
    <Card className="w-[240px] h-[240px] bg-gradient-to-br from-violet-500 to-fuchsia-500">
      <CardBody className="justify-center items-center py-0">
        <CircularProgress
          classNames={{
            svg: "w-36 h-36 drop-shadow-md",
            indicator: "stroke-white",
            track: "stroke-white/10",
            value: "text-3xl font-semibold text-white",
          }}
          value={70}
          strokeWidth={4}
          showValueLabel={true}
        />
      </CardBody>
    </Card>
  );
}

注意：你可以在有插槽的每个组件的文档中找到 插槽部分。


CSS 模块
CSS 模块允许创建局部作用域类和变量。以下是如何使用它来覆盖样式
import {CircularProgress, Card, CardBody} from "@nextui-org/react";
import styles from './App.module.css';

export default function App() {
  return (
    <Card className={styles.card}>
      <CardBody className={styles.cardBody}>
        <CircularProgress
          classNames={{
            svg: styles.svg,
            indicator: styles.indicator,
            track: styles.track,
            value: styles.value,
          }}
          value={70}
          strokeWidth={4}
          showValueLabel={true}
        />
      </CardBody>
    </Card>
  );
}

使用相应的 CSS 模块
/* App.module.css */
.card {
  width: 240px;
  height: 240px;
  background: linear-gradient(to bottom right, violet, fuchsia);
}

.cardBody {
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}

.svg {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.indicator {
  stroke: white;
}

.track {
  stroke: rgba(255, 255, 255, 0.1);
}

.value {
  font-size: 24px;
  font-weight: 600;
  color: white;
}

CSS-in-JS
如果你是 CSS-in-JS 库，例如 styled-components 或 emotion，你可以使用以下示例来覆盖组件的样式
import {CircularProgress, Card, CardBody} from "@nextui-org/react";
import styled from 'styled-components';

const StyledCard = styled(Card)`
  width: 240px;
  height: 240px;
  background: linear-gradient(to bottom right, violet, fuchsia);
`;

const StyledCardBody = styled(CardBody)`
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
`;

const StyledCircularProgress = styled(CircularProgress).attrs({
  classNames: {
    svg: 'w-36 h-36 drop-shadow-md',
    indicator: 'stroke-white',
    track: 'stroke-white/10',
    value: 'text-3xl font-semibold text-white',
  }
})``;

export default function App() {
  return (
    <StyledCard>
      <StyledCardBody>
        <StyledCircularProgress
          value={70}
          strokeWidth={4}
          showValueLabel={true}
        />
      </StyledCardBody>
    </StyledCard>
  );
}

在此示例中，StyledCard、StyledCardBody 和 StyledCircularProgress 组件具有原始组件的组合样式和模板字符串中定义的自定义样式。.attrs 方法用于将 classNames prop 添加到 StyledCircularProgress 组件。