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

マテリアルデザインは、カード、グリッドベースのレイアウト、レスポンシブアニメーションを中心としたウェブ向けの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 ：primary、secondary、またはdefaultのいずれかで、空のままにした場合と同じ色です。これらの色のカスタマイズについては後で説明します。
mini ：バリアントがfab（フローティングアクションボタン）に設定されている場合、ボタンのサイズが縮小されます。

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

テキストフィールド

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

@material-ui/core/TextFieldからインポートされた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のすべての子は、均一にカスタマイズ可能なスタイルになります。

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

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

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

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