MUI 공식문서

MUI: The React component library you always wanted

설치해야 할 사항

MUI는 기본적으로 emotion이라는 자체 engine을 사용하는 하지만, styled-components와 함께 쓰려면 별도로 styled-component engine을 install 해줘야 합니다.

MUI is using emotion as a styling engine by default. If you want to use styled-components instead, run:

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

Styled Component 문법으로 사용하는 법!

🍉 <StyledEngineProvider injectFirst>로 감싸줘야 styled-components 문법을 사용할 수 있으며, styled-components 문법이 override됨.

import React from 'react';
import styled from 'styled-components'; // styled는 그대로 넣어줌
import Button from '@mui/material/Button';  // mui에서 import한 버튼 컴포넌트
import { StyledEngineProvider } from '@mui/styled-engine'; // 본문을 감싸줘야함

const Component = () => {
	return(
		<StyledEngineProvider injectFirst>
			<MyButton>MUI에서 가져온 내 버튼!</MyButton>
			// 다른 버튼들, 내 styled components들		
		</StyledEngineProvider>
	)
}

// 다음과 같이 styled component 문법으로 넣어줌
const MyButton = styled(Button)`
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  color: white;
  height: 48px;
  padding: 0 20px;
`;

export default Component;

전체 파일에서 공통으로 사용하고 싶다면?

아래와 같이 index.js에서 최상단을 감싸주면 된다!

import React from 'react';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';

import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';
import { createRoot } from 'react-dom/client';
import { StyledEngineProvider } from '@mui/styled-engine';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <StyledEngineProvider injectFirst>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixins }}>
      <Router />
    </ThemeProvider>
  </StyledEngineProvider>
);

Material Icon 사용법

To use an icon simply wrap the icon name (font ligature) with the Icon component , for example: import Icon from '@mui/material/Icon'; <Icon>star</Icon>; By default, an Icon will inherit the current text color.

Palette - Material UI

// 다음과 같이 import 하고
import AccessAlarmsTwoToneIcon from '@mui/icons-material/AccessAlarmsTwoTone';

// 아래와 같이 사용한다
<AccessAlarmsTwoToneIcon color="warning" />