Material-UI v5でスタイルをコンポーネントに適用する：makeStyles vs. withStyles

2024-05-23

React.jsとMaterial-UIにおけるスタイルへのpropsの渡し方

withStylesは、Material-UI v4以前のバージョンで使用されていた主要な方法です。コンポーネントにスタイルを適用するには、以下の手順が必要です。

スタイル定義関数を用意する。この関数は、テーマオブジェクトを引数とし、スタイルオブジェクトを返す必要があります。
withStyles関数を使用して、スタイル定義関数をラッピングする。この関数は、コンポーネントを受け取り、スタイルが適用された新しいコンポーネントを返します。
ラッピングされたコンポーネントをレンダリングする。

例：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: 16,
  },
});

const MyComponent = withStyles(styles)(({ classes }) => (
  <div className={classes.root}>
    {/* コンポーネントの内容 */}
  </div>
));

export default MyComponent;

利点:

シンプルで分かりやすい構文
TypeScriptとの互換性が高い

v5以降で非推奨
スタイル定義がコンポーネント内に密結合される
テーマオブジェクトへのアクセスが煩雑

makeStyles関数を使用して、スタイル定義オブジェクトを作成する。このオブジェクトには、スタイル名とスタイル内容をキーと値のペアで定義します。
スタイル定義オブジェクトをコンポーネント内で呼び出し、スタイルクラスを取得する。
取得したスタイルクラスをコンポーネント要素に適用する。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: '#f00',
    color: '#fff',
    padding: 16,
  },
});

const MyComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {/* コンポーネントの内容 */}
    </div>
  );
};

export default MyComponent;

v5以降で推奨されている

withStylesよりも若干構文が複雑

上記以外にも、styled-componentsやCSS Modulesなどのライブラリを使用して、React.jsとMaterial-UIでスタイルを適用する方法があります。それぞれのライブラリには、独自の利点と欠点があるため、プロジェクトの要件に合わせて最適な方法を選択することが重要です。

React.jsとMaterial-UIでスタイルをコンポーネントに適用するには、様々な方法があります。それぞれの方法には、利点と欠点があるため、プロジェクトの要件に合わせて最適な方法を選択することが重要です。

withStyles: シンプルで分かりやすい構文、TypeScriptとの互換性が高いが、v5以降で非推奨、スタイル定義がコンポーネント内に密結合される、テーマオブジェクトへのアクセスが煩雑
makeStyles: v5以降で推奨、スタイル定義をコンポーネントから分離できる、テーマオブジェクトへのアクセスが容易だが、withStylesよりも若干構文が複雑、TypeScriptとの互換性はやや低い

上記以外にも、styled-componentsやCSS Modulesなどのライブラリを検討することもできます。

withStylesを使う

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: 16,
  },
});

const MyComponent = withStyles(styles)(({ classes }) => (
  <div className={classes.root}>
    <h1>My Component</h1>
    <p>This component has a primary background color and white text.</p>
  </div>
));

export default MyComponent;

makeStylesを使う

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: '#f00',
    color: '#fff',
    padding: 16,
  },
});

const MyComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <h1>My Component</h1>
      <p>This component has a red background color and white text.</p>
    </div>
  );
};

export default MyComponent;

styled-componentsを使う

import React from 'react';
import styled from 'styled-components';

const MyComponent = styled.div`
  background-color: #00f;
  color: #fff;
  padding: 16;
`;

const MyComponentWithProps = ({ title, text }) => (
  <MyComponent>
    <h1>{title}</h1>
    <p>{text}</p>
  </MyComponent>
);

export default MyComponentWithProps;

CSS Modulesを使う

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.root}>
      <h1>My Component</h1>
      <p>This component has a blue background color and white text.</p>
    </div>
  );
};

export default MyComponent;