スタイリング

Radix Themesによるスタイリングへのアプローチ方法。

はじめに

Radix Themesには、組み込みのスタイリングシステムがありません。cssプロパティやsxプロパティはなく、内部的にスタイリングライブラリを使用していません。内部的には、標準のCSSで構築されています。

アプリケーションのスタイリング技術を選択する際に、オーバーヘッドはありません。

提供されるもの

Radix Themesのコンポーネントは比較的閉じられており、常に簡単に上書きできるわけではないスタイルセットが付属しています。それらは、プロパティとテーマの設定で許可されている範囲内でカスタマイズ可能です。

ただし、Radix Themesコンポーネントを動かすのと同じCSS変数にもアクセスできます。これらのトークンを使用して、元のテーマに自然に溶け込むカスタムコンポーネントを作成できます。トークンシステムへの変更は、破壊的な変更として扱われます。

特定のトークンに関する詳細については、テーマセクションの対応するガイドを参照してください。

スタイルの上書き

単純なスタイルの上書きを超えて、コンポーネントをそのまま使用するか、同じビルディングブロックを使用して独自のバージョンを作成することをお勧めします。

ほとんどのコンポーネントにはclassNameとstyleのプロパティがありますが、多くのスタイルを上書きする必要がある場合は、次のいずれかを行うべきであるという良い兆候です。

• 既存のプロパティとテーマの設定で必要なものを達成してみてください。
• 基礎となるトークンシステムを調整することでデザインを実現できるかどうかを確認してください。
• より低レベルのビルディングブロック、例えばプリミティブとカラーを使用して独自のコンポーネントを作成します。
• Radix Themesがプロジェクトに適しているかどうかを再考してください。

Tailwind

Tailwindは素晴らしいです。しかし、Radix ThemesをTailwindと共に使用する予定がある場合は、その人間工学がどのようにして即座に複雑なスタイルを作成するように促し、摩擦なくコンポーネントの内部にアクセスする可能性があるかに注意してください。

Tailwindは異なるスタイリングパラダイムであり、プロパティ、トークン、共有ビルディングブロックセットの上に新しいコンポーネントを作成することでカスタマイズを実現するクローズドコンポーネントシステムのアイデアと上手く混ざらない可能性があります。

カスタムコンポーネント

カスタムコンポーネントを作成する必要がある場合は、Radix Themesで使用されているのと同じビルディングブロックを使用してください。

• テーマコンポーネントを動かすトークン
• Radix Primitives、アクセシビリティに優れた、スタイルのないコンポーネントのライブラリ
• Radix Colors、美しくウェブサイトやアプリを構築するためのカラースキーム

Radix Themesのソースコードを調べて、それがどのように構築されているかを確認してください。

よくある問題

z-indexの競合

すぐに使用できる状態で、ポータルされたRadix Themesコンポーネントは、競合することなく任意の順序で入れ子にしたり積み重ねたりできます。たとえば、ダイアログを開くポータルを開き、さらに別のポータルを開くことができます。これらはすべて、開かれた順序で互いに積み重ねられます。

独自のコンポーネントを構築する際には、z-indexの競合を回避するために次のルールを使用してください。

• z-index値には、まれなケースを除いてauto、0、または-1以外の値を使用しないでください。
• 互いに積み重ねる必要がある要素をポータルでレンダリングします。

メインコンテンツとポータルされたコンテンツは、ルート<Theme>コンポーネントのスタイルによって作成されたスタッキングコンテキストによって区切られています。これにより、z-indexを気にすることなく、メインコンテンツの上にポータルされたコンテンツを積み重ねることができます。

Next.jsのインポート順序

Next.js 13.0から14.1では、app/**/layout.tsx内のCSSファイルのインポート順序は保証されません。そのため、正しく記述していても、Radix Themesが独自のスタイルを上書きすることがあります。

import '@radix-ui/themes/styles.css';
import './my-styles.css';

このNext.jsの問題は、断続的に発生したり、開発時または本番時でのみ発生したりすることがあります。

回避策として、まずpostcss-importを使用してすべてのCSSを単一のファイルにマージし、それをレイアウトにインポートすることができます。あるいは、page.tsxファイルでスタイルを直接インポートする方法もあります。

Tailwindの基本スタイル

Tailwind v3以降、@tailwindディレクティブによって生成されるスタイルは、元のインポート順序に関係なく、通常はインポートされたCSSの後に追加されます。特に、TailwindのボタンのリセットスタイルはRadix Themesのボタンと干渉し、特定のボタンが背景色なしでレンダリングされる可能性があります。

回避策

• @tailwind baseを使用しないでください。
• TailwindとRadix Themesのために、個別のCSSレイヤーを設定します。
• postcss-import を設定し、Radix Themes のスタイルの前に、@import tailwindcss/base を使用して Tailwind のベーススタイルを手動でインポートします。設定例

ポータル内のスタイルが不足している

Radix Themes プロジェクトでカスタムポータルをレンダリングすると、ルートの<Theme>コンポーネントの外側に表示されるため、ほとんどのテーマトークンとスタイルにアクセスできません。これを解決するには、ポータルコンテンツを別の<Theme>でラップします。

// Implementation example of a custom dialog using the low-level Dialog primitive
// Refer to https://radix-ui.dokyumento.jp/primitives/docs/components/dialog
import * as Dialog from '@radix-ui/react-dialog';
import { Theme } from '@radix-ui/themes';

function MyCustomDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Portal>
        <Theme>
          <Dialog.Overlay />
          <Dialog.Content>
            <Dialog.Title />
            <Dialog.Description />
            <Dialog.Close />
          </Dialog.Content>
        </Theme>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Radix Themes の Dialog や Popover などのコンポーネントは既にこれを処理しているので、これは独自のポータル化されたコンポーネントを作成する場合にのみ必要です。

複雑なCSS優先順位

通常、カスタムCSSでRadix Themesのスタイルを上書きすることを望みますが、逆を期待するのが自然な場合もあります。

ブラウザのデフォルトの余白をリセットするだけの単純な段落スタイルを考えてみましょう。

.my-paragraph {
  margin: 0;
}

Box の margin プロパティを asChild を介してカスタム段落に適用する場合があります。

import '@radix-ui/themes/styles.css';
import './my-styles.css';

function MyApp() {
  return (
    <Theme>
      <Box asChild m="5">
        <p className="my-paragraph">My custom paragraph</p>
      </Box>
    </Theme>
  );
}

しかし、これは直感的に機能しません。カスタムスタイルはRadix Themesのスタイルの後にインポートされるため、marginプロパティを上書きします。回避策として、Radix Themes は、元の styles.css が基づいている個別の tokens.css、components.css、および utilities.css ファイルを提供します。

import '@radix-ui/themes/tokens.css';
import '@radix-ui/themes/components.css';
import '@radix-ui/themes/utilities.css';

カスタムスタイルの後に utilities.css をインポートして、レイアウトプロパティがカスタムスタイルで期待どおりに機能するようにすることができます。ただし、Next.js を使用している場合は、上記のインポート順序の問題に注意してください。

スタンドアロンレイアウトコンポーネントを使用する場合は、それらにも分割されたCSSファイルが用意されています。

import '@radix-ui/themes/layout/tokens.css';
import '@radix-ui/themes/layout/components.css';
import '@radix-ui/themes/layout/utilities.css';