【MUI】ログインページを作ってみた！

今回は、ReactとMUIを使用してシンプルかつモダンなログインページを作成します。以下のステップに従って、React初学者でもできるようにフォローするのと、自らのアウトプットのために記事を投稿します！
...私はプログラミング勉強を始めて1ヶ月半ですw

1. インポート

まず初めに、必要なコンポーネントと関数をインポートします。以下のように、React、Button、TextField、Typographyを@mui/materialから、そしてstyled関数を@mui/systemからインポートします。

import React from 'react';
import { Button, TextField, Typography } from '@mui/material';
import { styled } from '@mui/system';

2. スタイリング

次に、ログインページの基本的なスタイリングを行うために、ContainerとLoginCardという二つのスタイル化されたコンポーネントを作成します。

const Container = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  backgroundColor: '#f0f0f0',
});

const LoginCard = styled('div')({
  backgroundColor: '#fff',
  padding: '20px',
  borderRadius: '10px',
  boxShadow: '0 0 10px rgba(0,0,0,0.1)',
});

3. Login関数

Login関数は、ログインページの主要なコンポーネントを返します。ここにはテキストフィールドとログインボタンが含まれます。

function Login() {
  return (
    <Container>
      <LoginCard>
        <Typography variant="h5" gutterBottom>
          ログイン
        </Typography>
        <TextField variant="outlined" margin="normal" fullWidth label="ユーザー名" />
        <TextField variant="outlined" margin="normal" fullWidth label="パスワード" type="password" />
        <Button variant="contained" color="primary" fullWidth>
          ログイン
        </Button>
      </LoginCard>
    </Container>
  );
}

4. エクスポート

最後に、Login関数をエクスポートして、他のファイルで使用できるようにします。

export default Login;

まとめ

以上でMUIを使用したログインページの作成が完了しました！相変わらずMUIはシンプルかつモダンだねw