Material-UIと反応するエレガントなUX

投稿日: 2022-04-20 2022-10-06
タグ: React

マテリアルデザインは、カード、グリッドベースのレイアウト、レスポンシブアニメーションを中心としたウェブ向けのGoogleのデザイン言語です。 Material-UI は、Reactのコンポーネントとユーティリティのコンパクトでカスタマイズ可能な美しいコレクションであり、マテリアルデザインの仕様をReactアプリで使用するのは簡単です。

この投稿では、CSS-in-JSを使用してコンポーネントをスタイリングするカスタムアプローチを使用して、Material-UIのセットアップ、使用法、およびテーマ設定について説明します。この投稿では、 Material-UIv1.xについて説明します。

設定

npmまたはyarnを使用してインストールします @material-ui/core.

$ yarn add @material-ui/core

# or, using npm:
$ npm install @material-ui/core

インストール後、material-uiをインポートできるようになります。

import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';

フォント

マテリアルデザインの仕様はRobotoとマテリアルアイコンを念頭に置いて作成されているため、それらをデザインに含めることをお勧めします。この例では、両方をGoogleFontsからロードします。

index.html（部分的）

<link rel="stylesheet"
  href=“https://fonts.googleapis.com/css?family=Roboto:400,500">
<link rel="stylesheet"
  href=“https://fonts.googleapis.com/icon?family=Material+Icons">

使用法

Material-UIライブラリは、レイアウト、フォーム、ナビゲーション、およびその他のウィジェット用のReactコンポーネントで構成されています。ここでそれらのいくつかを見てみましょう。

ボタン

これらのコンポーネントの中で最も単純なのは、ボタンからインポートされたものです。 @material-ui/core/Button、クリックすると気の利いた波及効果が得られます。ネイティブHTMLのように <button>、ボタンには、テキスト、アイコン、またはその他のReactノードを含めることができます。次の例では、アイコンはからインポートされます @material-ui/core/Icon.

<Button variant="outlined" color="primary" onClick={…}>
  <Icon>location_on</Icon>
  Find me
</Button>

Buttonコンポーネントの注目すべき小道具は次のとおりです。

Variant ：コンポーネントの視覚スタイル。 contained, outlined, fab、またはデフォルトのリンクスタイルの場合は空。
color ：の1つ primary, secondary、また default、空のままにした場合と同じ色です。これらの色のカスタマイズについては後で説明します。
mini ：バリアントがに設定されている場合 fab （フローティングアクションボタン）すると、ボタンのサイズが小さくなります。

上の写真のすべてのスタイルは、これら3つの小道具だけを使用して実現されました。 Button コンポーネントは、 className 、 aria-label 、 disable 、hrefなどの一般的な小道具もサポートしています。

テキストフィールド

<TextField
  label="Basic TextField" />
<TextField
  placeholder="Placeholder here"
  label="Basic TextField" />

からインポートされたTextField @material-ui/core/TextField、標準のReact入力コンポーネントのように動作し、次の小道具をサポートします（とりわけ）：

label ：テキスト入力の上にあるアニメーションラベル。コンポーネントがフォーカスされると、上のスクリーンショットの2番目の例のように、入力の上に移動します。
プレースホルダー：入力内の灰色のテキストプレースホルダー。
InputProps ：含まれている入力コンポーネントに渡す小道具。

以下は、InputPropsプロップを使用してプロップを入力コンポーネントに渡す例です。

<TextField label="Length"
  InputProps={{
    endAdornment: <InputAdornment position="end">in.</InputAdornment>,
  }}
/>

ご覧のとおり、内側のInputコンポーネントはstartAdornmentおよびendAdornment：アイコンやラベルなどの入力の左右にあるコスメティックノードを取ることができます。

装飾品は <InputAdornment> 小道具としての要素。上記の例は、右側にin。の化粧品の装飾が施されたテキスト入力です。

テーマ

Material-UIは、JavaScriptベースのアプローチを使用して、CSS-in-JSと呼ばれるコンポーネントのテーマを設定します。このアプローチでは、CSSクラス名はJavaScriptオブジェクトを使用して生成されます。 Reactのスタイルプロップを使用したことがある場合、これらのオブジェクトは見覚えがあるかもしれません。

const styles = theme => ({
  container: {
    backgroundColor: 'blue',
    color: 'red',
    width: '75%',
    height: 5 * theme.spacing.unit
  }
});

この例では、 styles テーマをパラメータとして受け取り、という名前のスタイルオブジェクトを返す関数です。 container. キャメルケースのCSSキーは文字列または数値に割り当てられ、テーマにはカスタマイズ可能な間隔があります。

生成されたクラスの使用

合格するには styles コンポーネントに反対する場合は、 withStyles クラス名をと呼ばれる小道具として渡す高階コンポーネントを返す関数 classes.

const MyComponent = (props) => {
  const classes = props.classes;
  return (
    <div className={classes.container}>
      // stuff
    </div>
  );
}

export default withStyles(styles)(MyComponent);

カスタムテーマの作成

カスタムテーマを作成するには、 createMuiTheme 関数とその戻り値を MuiThemeProvider アプリのルートにある要素。

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme();

const App = props => (
  <MuiThemeProvider theme={theme}>
    // your app
  </MuiThemeProvider>
);

今のすべての子供たち MuiThemeProvider 均一にカスタマイズ可能なスタイルを持っています！

The createMuiTheme 関数は通常、テーマを定義するためにオブジェクトを取ります。

const theme = createMuiTheme({
  palette: {
    primary: '#e89eef',
    secondary: '#336b87'
  }
});

チュートリアルの前半で使用した一次色と二次色を含むすべての色は、テーマに沿ったものです。オプションの全範囲は、テーマドキュメントにあります。

Material-UIは、わずかな労力でReactサイトのコントロールに洗練されたルックアンドフィールを追加するための優れた方法です。プロジェクトについて詳しく知りたい場合は、公式ドキュメントにアクセスするか、貢献について学ぶことができます。

getdocs

13036