スタイルをオーバーライドする

デフォルトのコンポーネントスタイルをオーバーライドするのは、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

styled-components または emotion などの CSS-in-JS ライブラリを使用している場合は、次の例を使用してコンポーネントのスタイルをオーバーライドできます。

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 メソッドは、StyledCircularProgress コンポーネントに classNames プロパティを追加するために使用されます。