[React] MUI (Material-UI) CSS 사용하기

https://mui.com/

MUI: The React component library you always wanted

 

React CSS를 쉽게 도와주는 프레임 워크

 

설치

npm install @mui/material @emotion/react @emotion/styled

 

아이콘 설치

npm i @mui/icons-material

 

+ 위에선 Emotion을 설치했는데 Styled-component를 사용하고 싶다면?

npm install @mui/material @mui/styled-engine-sc styled-components

 

 

 

 

mui styles 설치(나중에 style개별적으로 적용시 필요함=>makestyle을 적용시키려했으나 안돼서 필요 X)

npm install @mui/styles

 

사용

1. 사이트에서 Get started를 누르고

2. 왼쪽 메뉴바에서 Components 눌러서 원하는 스타일 코드 적용시키면 됨

 

---

side bar(menu) 사용 코드

https://mui.com/material-ui/react-drawer/

React Drawer component - Material UI

 

---

전체 font size변경하기

mui 가 전반적으로 글씨가 작아 전체적으로 키우고 싶었다.

아래와 같은 방식으로 진행하려 했으나 예전 방식이라고 홈페이지에서도 나타나있으며  내코드에선 적용이 되지 않았다.

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

const theme = createTheme();

const useStyles = makeStyles((theme) => ({
  root: {
    color: theme.palette.primary.main,
  }
}));

const App = (props) => {
  const classes = useStyles();
  return <ThemeProvider theme={theme}><div {...props} className={classes.root}></ThemeProvider>;
}

 

따라서 theme 을 변경하는 것으로 해결하였다.

1. them 설정파일 작성

 

2. 아래와 같이 상위 App파일에서 import 시키고 

<ThemeProvider theme={theme}> 으로 감싼후 <CssBaseline /> 넣기 (LayoutDefault는 전체 route파일임)

이러면 상위에서부터 설정했기때문에 적용된다.

 

각 페이지에서 mui작성시 이런식으로 Theme을 어차피 mui에서 불러와 사용해서 자동 적용되는것)

 

---

컴포넌트 스타일 변경하기

아래는 mui의 컴포넌트 사용시 코드를 파일에 가져온 것이다. 여기서 해당하는 class를 밑에

& .MuiDrawer-paper 불러온 후 style을 작성한다.

 

(클래스는 크롬 개발자도구나 MUI API 를 확인하면 된다.)

 

참고하기)

https://velog.io/@kangactor123/mui-v5-custom

https://agilejung.tistory.com/m/entry/MUI%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

---

SCSS 로도 스타일 변경가능

scss에서 크롬개발자에서 해당 class를 찾아서 style코드를 작성한다.

import 하면 해당 스타일이 적용된다.

---

참고)

(아래 방법으로 진행함)

https://velog.io/@uhui94/mui-%EC%82%AC%EC%9A%A9%EA%B8%B0

[mui]theme 설정하기

https://mui.com/material-ui/customization/theme-components/

Components - Material UI

 

https://cocoder16.tistory.com/81

리액트 UI 디자인 고민 Material-UI로 해결하기

 

https://agilejung.tistory.com/m/entry/MUI%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

MUI를 사용하는 방법

---

(mekestyle 대신 커스텀 hook사용 예)

https://velog.io/@dlruddms5619/Migration-MUI-v4-to-v5-makeStyles-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://iancoding.tistory.com/306

[Material-UI] 기초(3) - styles, theme

 

(기존 makestyle하려했던 것 )

https://devilfront.tistory.com/m/84

Material UI 사용법 및 makeStyles