googleOAuth 외에도 사이트 내 개별적으로 로그인/회원가입 기능을 추가하고 싶어, mui를 이용해 만들기로 했다.

MUI

ThemeProvider

이미 전역으로 사용하고 있는

import { ThemeProvider } from '@emotion/react';

ThemeProvider로 App을 감싸고 있어서 그런지, 그냥 mui 라이브러리 설치 후 바로 예제코드로

import { TextField } from '@mui/material';

<TextField id='standard-basic' label='Standard' variant='standard' />

을 테스트용으로 작성해보았는데,

TypeError: Cannot read properties of undefined (reading 'create')라는 에러가 났다.
여러 이유가 있겠지만, MUI 테마 설정이 제대로 이루어지지 않았거나 초기화되지 않았을 경우에 이럴 수도 있다고 하여

참고한 인사이트

import { ThemeProvider, createTheme } from '@mui/material/styles';

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Global } from '@emotion/react';
import GlobalStyle from './styles/globalStyle';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { theme } from './styles/theme';

const mergedTheme = createTheme({
  ...theme, 
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
        <ThemeProvider theme={mergedTheme}>
          <Global styles={GlobalStyle} />
          <App />
        </ThemeProvider>
  </React.StrictMode>
);

ThemeProvider는 중복해서 적용할 수 없었기에, 새로 createTheme을 만들고 기존 사용하던 theme을 MUI 테마와 합쳐서 적용시켰다.

로그인 디자인은 dribble에서 Outcrowd 라는 분의 디자인을 참고로 했다.
(여담이지만 사이트에 들어가서 보면 더 귀엽다. 비밀번호 입력할 때는 도형들이 일부러 눈을 가리거나 다른 곳 보는 척을 한다)

로그인 화면을 만들기 위해 MUI의 sx prop을 이용해 스타일링을 했다.
이미 코드를 수정한 뒤라 공식문서에 있는 예제코드를 옮겨와봤다.

Using MUI system: sx prop

import * as React from 'react';
import Box from '@mui/material/Box';

export default function BoxSx() {
  return (
    <Box
      sx={{
        width: 300,
        height: 300,
        backgroundColor: 'primary.dark',
        '&:hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
        },
      }}
    />
  );
}

내 코드는 위처럼 Box 하나만 있는게 아니라 form 아래에 Wrapper, Textfield, Button,..도 있다보니 코드가 너무 길어졌다.
가독성이나 재사용성에서 좋지 않은 것 같아 다른 방법으로 스타일링하는 방법을 찾았다.
또한 공식문서에서도 <Box sx={...}>보다 styled-components로 <StyledDiv>를 사용하는 것이 runtime performance에 더 좋다고 써있었다.

Using the styled-components API

//src/components/SignIn/style.ts
import styled from '@emotion/styled';
import TextField from '@mui/material/TextField';

const StyledTextField = styled(TextField)`
  width: 200px;
`;
export { StyledTextField };

오늘의 결과물

참고사이트
Mui Box와 div의 차이 이해하기 | Mui sx와 inline style의 차이 by dishate

---

오늘의 일기:

참고로 내가 이전 프로젝트 때 @mui/styles에서 MaterialTextField를 import했던 방식은 이제 legacy 코드라는 공식문서 글을 봤다. 간단히 정리하자면, @mui/material 에서 더이상 쓰이지 않는, v5에서 deprecate된 JSS를 쓰기 때문이라고 한다.