Material-UIでCSSを使用する方法

1. インラインスタイル: Material-UIのコンポーネントには、styleプロパティを使用してインラインスタイルを設定することができます。例えば、Buttonコンポーネントにスタイルを適用するには、以下のようにします。

import { Button } from '@material-ui/core';
const MyComponent = () => {
  return (
    <Button style={{ color: 'red', backgroundColor: 'blue' }}>Click me</Button>
  );
};

2. makeStylesフック: makeStylesフックを使用すると、CSSを定義してMaterial-UIのコンポーネントにスタイルを適用することができます。以下は、makeStylesフックを使用してスタイルを定義し、Buttonコンポーネントに適用する例です。

import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  myButton: {
    color: 'red',
    backgroundColor: 'blue',
  },
});
const MyComponent = () => {
  const classes = useStyles();
  return (
    <Button className={classes.myButton}>Click me</Button>
  );
};

3. グローバルCSS: Material-UIでは、createMuiTheme関数を使用してグローバルなテーマをカスタマイズすることもできます。この方法では、テーマオブジェクト内でCSSを定義し、アプリケーション全体に適用することができます。

import { Button } from '@material-ui/core';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        color: 'red',
        backgroundColor: 'blue',
      },
    },
  },
});
const MyComponent = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button>Click me</Button>
    </ThemeProvider>
  );
};

以上の方法は、Material-UIでCSSを使用するための一般的な方法です。他にもさまざまなアプローチがありますが、これらの例は基本的な使い方を示しています。Material-UIの公式ドキュメントも参考になりますので、詳細な情報を得たい場合はそちらも確認してみてください。