MUI 5 カスタマイズ 最適なスタイリング法とは？

How to Customize MUI v5 Components

MUIは、最も人気のある丈夫なReactコンポーネントライブラリのうちの1つです。デベロッパーは、MUIを使ってReactアプリのユーザーインターフェースをまとめます。また、MUIはプロトタイピングにも便利です。このライブラリを使用すると、デザイナーは、完全にインタラクティブで、ユーザビリティ・テストや引き継ぎに対応できる高忠実度のプロトタイプを、実質サッと簡単に作成することができます。

MUIを使ったプロトタイピングを試してみたい方は、無料トライアルにサインアップすると、MUIキットを14日間使用することができます。ベクター画像の代わりにコードをレンダリングするデザインツールを使って、プロトタイプがどれだけ実際の製品に近いものになるかをご覧ください。

UXPin MergeでMUIを使ったデザインの可能性を目一杯ご体験ください。

この記事では、 MUI 5 コンポーネントの様々なスタイリング法の簡単な概要と、それらのスタイリング法を考慮すべき理由について説明します。

多くのチームが、デザインシステム用の既製のコンポーネントライブラリとしてMUIを使用しています。MUIはオープンソースのライブラリで、大規模なコミュニティによってドキュメント化され、メンテナンスされているので、Reactライブラリを一から構築するためにリソースをムダにする代わりに、それを利用すればいいのです。 MUIコンポーネントはカスタマイズが可能です。

MUI 5 コンポーネント をカスタマイズする方法 – 正しい方法の選択

MUI コンポーネント のカスタマイズについて議論する場合、そのほとんどはどのようにスタイリングされるかに集約されています。このトピックについて深く掘り下げた記事はすでに多数ありますが、ここでは最高のスタイリング法について簡単に説明します。

１）Theme Provider

まずMUIの最初のスタイリング法は、他のコンポーネントをラップするHoC (Highrt order Components)であるThemeProviderでしょう。これは、カスタマイズ・スタイルを注入し、ユーザーがスタイルとプロップを上書きできるようにするものです。 これを利用して、例えばブランド化されたライブラリを構築するために、大抵のコンポーネントで簡単に使えるようなスタイルを作りたいと思うでしょう。チュートリアルではなく、本当にシンプルで簡単なショーケースですので、Buttonコンポーネントをご覧いただき、スタイルを上書きする方法に注目して、ブランド化されたコンポーネントの開発を始めてみましょう。

２）createStyled

MUIカスタマイズの次の方法は、スタイリングされたメソッドです。これはスタイリングされたユーティリティから発展した機能です。この方法は、あまり使わないスタイルを適用する必要がある場合に非常に便利だと思いましたが、再利用できるようにするのに時間をかけるほど重要なものだったのです。 例えば、使用頻度の高いコンポーネントがあるが余白なしやマージンなしなど、特定のスタイルにする必要があるのは25%に過ぎない場合、これらのユースケースでスタイルを有効にするために、対応するプロップを追加します。下の画像は、MenuItem コンポーネントの余白を時折削除する必要がある場合です。


const stylesFromProps = {
 shouldForwardProp: (prop) => prop !== 'disablePadding',
};
const MenuItemM = styled(
 MenuItem,
 stylesFromProps,
)(({ theme, disablePadding = false }) => ({
 ...(disablePadding && {
   padding: 0,
 }),
}));

３）sx={…} Prop

新しくリリースされたMUI 5では、prop sxが導入されました。 これは、テーマとその変数、または考え得るあらゆる有効なCSSにアクセスできる、カスタマイズスタイルをサッと定める方法です。 これは、複数の場所で使用されるコンポーネントがあり、非常に特定のスタイルを持つ必要がある場合、また例えば、以前説明したMenuItemコンポーネントの余白を削除しなければならないという問題のように、1つのケースに対してニッチな問題を修正するのに非常に便利です。

</p>

４）コンポーネント ラッピング

次は、コンポーネントをラップして、スタイルを変更するためのプロップを渡してみる方法です。可能性はありますが、プロップが重複することが多く、全体的に問題があると感じました。

５）スタイリングされてない コンポーネント

MUI コンポーネントをカスタマイズするもう一つの方法は、非常に新しく、まだ完全には実装されていないUnstyled Componentsの使用です。今後数ヶ月のうちに、より多くのコンポーネントをサポートすると言われています。 MUIを使わない理由にもなっているMaterial Designに基づかないコンポーネントライブラリをUnstyled Componentsで作ることができるので、これは素晴らしい解決策になりそうです。CSSの衝突を避けるのに最適なようです。

６）MUI Box Component

最近わかったことなのですが、Boxコンポーネントを使ってスタイルを上書きする方法があります。ドキュメントが継続的に更新されているので、どのように機能するのか、もっと情報が欲しいです。 以上、MUI 5 のコンポーネントをカスタマイズするおすすめの方法をご紹介しました。これらの方法は、多くの可能性を提供し、Unstyled Componentsを使用すると、ユニークなブランドのライブラリを作成することもできます。

MUIをUXPin Mergeと同期する

多くのスタイリング方法を持つMUIを一度試してみてください。それを使ってインターフェイスデザインを作成する準備ができたら、UXPin Mergeでどのようにできやすくなるかをご覧ください。 これは、MUIコンポーネントの完全なインタラクションと機能でデザインし、サードパーティツールでデザインをコードに変換する必要なく、制作段階でそれらのコンポーネントを使用できるようにする画期的なソリューションです。そして、デザインチームと開発チームは、信頼できる唯一の情報源（Single Source of Truth）を共有することができるのです。

Discover Merge
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you