> ## Documentation Index > Fetch the complete documentation index at: https://developer.box.com/llms.txt > Use this file to discover all available pages before exploring further. # Box UI Elementsのテーマとスタイルの設定 export const MultiRelatedLinks = ({sections = []}) => { if (!sections || sections.length === 0) { return null; } return

{sections.map((section, index) => )}

; }; export const RelatedLinks = ({title, items = []}) => { const getBadgeClass = badge => { if (!badge) return "badge-default"; const badgeType = badge.toLowerCase().replace(/\s+/g, "-"); return `badge-${badge === "ガイド" ? "guide" : badgeType}`; }; if (!items || items.length === 0) { return null; } return

{}

{title}

{}

{items.map((item, index) => {} {item.badge} {} {item.label} )}

; }; export const Link = ({href, children, className, ...props}) => { const localizedHref = localizeLink(href); return {children} ; }; Box UI Elementsのテーマとスタイルの設定により、企業の要件に合わせて、埋め込まれたBoxコンポーネントの外観をカスタマイズできます。現時点では、[テーマとスタイルの設定][blog]は、コンテンツエクスプローラとコンテンツアップローダーで使用可能です。 ## 開始方法選択したBoxコンポーネントをアプリケーションに追加します。デフォルトのBoxのテーマが適用されます。 ## カスタマイズ Boxでは、カスタマイズの目的でデザイントークンを使用します。デザイントークンとは、色、間隔、タイポグラフィ、スケールなど、特定の視覚的な属性を格納する名前付きのエンティティです。これは、プラットフォーム、ツール、コンポーネント間でのデザインプロパティの共有を容易にするために、ハードコードされた値の代わりに使用されます。埋め込まれたBoxコンポーネントでは、以下の要素を変更できます。 ### 色以下をカスタマイズできます。 * グローバルカラーパレット - プライマリカラー、セカンダリカラー、アクセントカラーを選択します。 * 状態の色 - カーソルを合わせたとき、フォーカスしたとき、アクティブな場合、無効な場合など、状態を表す色を選択します。 * コンポーネント固有の色 - たとえば、ボタンには、種類に応じて異なる色を選択できます。 - グラデーション - 背景やその他のコンポーネントとしてグラデーションを選択して調整します。 - 不透明度 - Boxのウィンドウやサイドパネルのオーバーレイ効果の不透明度を調整します。 ### タイポグラフィ以下をカスタマイズできます。 * テキストの装飾 - 下線、取り消し線、文字間隔 * 行の高さ、段落の間隔 ### 境界線、半径以下を選択できます。 * 境界線のスタイル - 幅、スタイル、色 * 角丸 ### 間隔以下を選択できます。 * 全体的な間隔 * コンポーネント固有の間隔 * コンポーネント固有の位置と分布 (例: justify-content) ### 影と高さ以下を定義できます。 * 影のプリセット * カスタマイズした影 ### インタラクティブな状態以下をカスタマイズできます。 * カーソルを合わせた状態、アクティブな状態、フォーカスした状態、無効な状態、エラー状態 - 背景色の変更などの視覚効果 * 遷移およびアニメーション ### コンポーネントレベルの上書きテキスト入力、ドロップダウン、チェックボックスを独自の色でカスタマイズできます。 ### アイコンボタンやドロップダウンなどのインタラクティブなアイコンのスタイルを設定します。ファイルアイコンやフォルダアイコンなどの非インタラクティブなアイコンをカスタムアイコンに置き換えるには、CSSでインラインSVGを使用します。非インタラクティブなアイコンの色、高さ、幅を変更するには、CSSを使用します。 CodePenでカスタムアイコンの実装例を確認してください。