Notice
Recent Posts
Recent Comments
Archives
반응형
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Today
Total
01-09 05:35
250x250
관리 메뉴

꿈꾸는 개발자의 블로그

[React] Mui styled-components 설치 및 구현 방법 본문

Programming/React

[React] Mui styled-components 설치 및 구현 방법

aldrn29 2022. 6. 18. 13:37

프로젝트를 진행하며 전체적으로 styled-components를 이용하여 스타일을 지정하고 있었는데, Mui로 불러온 같은 방식으로 구현하다가 오류가 나는 상황이 생겼다..!! 알아보니 그 이유는 Mui는 emotion이 기본 엔진인데, styled-components로 엔진을 교체하기 위한 작업이 동반되지 않았기 때문이였다. 공식 문서에도 친절히 설명이 되어있었는데 ㅠㅠ 에휴... 앞으로! 진짜 공식 문서부터 잘 챙겨보는 것을 습관화해야겠다! 

 

728x90

 

 

Mui styled-components 설치

yarn add @mui/material @mui/styled-engine-sc styled-components

 

Mui styled-components를 이용한 구현

import 부분에서 모듈 이름을 materialStyeld로 바꿔준 이유는 기존에 styled-components도 styled로 불러와 사용하고 있어서 이름이 겹쳤기 때문이다.

import { styled as materialStyled } from '@mui/material/styles';

const AnswerButton = materialStyled(Button)(
    () => (
        {
            width: '500px',
            height: '40px',
            borderRadius: '10px',
            color: 'black',
            '&:hover': {
                backgroundColor: 'var(--deepgreen)',
                color: 'white',
            }
        }
    ));

 

공식 문서

 

728x90
728x90

'Programming > React' 카테고리의 다른 글

[React] Typescript + useRef (Forwarding Refs) : HTMLInputElement 요소 받아오기  (0) 2022.06.29
[React] <video> 태그를 이용한 동영상 재생하기  (0) 2022.06.23
[React] TypeScript + 객체 값 순회하기  (0) 2022.06.16
[React] styled-components props 값 넘겨 받기  (0) 2022.06.16
[React] styled-components 사용하기  (0) 2022.06.14
'Programming/React' Related Articles more
Comments