MUI - styled-components로 커스텀하기

핵심 코드

import { styled as muiStyled } from '@mui/system';

styled를 그대로 사용하면 stlyed-components의 stlyed와 이름이 겹쳐서 에러가 난다.
따라서 as를 사용하여 이름을 바꿔줘야 함.

사용 예시

import styled from 'styled-components';
import { styled as muiStyled } from '@mui/system';
import Button from '@mui/material/Button/Button';

const StyledButton = muiStyled(Button)`
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1rem 0;
`;

function SignIn() {
  return (
    <>
      <StyledButton type='submit' fullWidth variant='contained' sx={{ mt: 3, mb: 2 }}>
          로그인하기
      </StyledButton>
    </>
  );
}

export default SignIn;