React でのスタイルの書き方

React でのスタイルの書き方を紹介します。

インラインスタイルの書き方

React でインラインスタイルは次の様に書けます。HTML 要素の style プロパティに、波括弧２つで囲んだ、スタイルのキーバリューペアを割り当てます。

<div style={{ color: 'green' }}>こんにちは！</div>

外部 CSS ファイルによるスタイルの適用

インラインスタイル以外にも、外部 CSS に記述されたスタイルをインポートし、HTML 要素に適用することもできます。（create-react-app で React アプリケーションを作成した際に、デフォルトで実装されているスタイルの指定方法となります。）

HTML 要素の持つ、className プロパティに、インポートしたスタイルに含まれるクラス名を指定します。

App.css

.App {
  margin: 1rem;
}

App.tsx

import './App.css';
import { Button } from "@mui/material";

function App() {
  return (
    <div className="App">
      <header>
        <Button variant="outlined">
          Material-UI ボタン</Button>
      </header>
    </div>
  );
}

export default App;