[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 theme에서 컴포넌트 커스터마이징하기>

기본 컴포넌트를 사용하는 방법에 대한 설명입니다. 🔥

https://avoc-o-d.tistory.com/43

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 컴포넌트 사용하기>

 

00. Styled Component

---

 styled 할 컴포넌트를 import 합니다. (저는 예를 들어 버튼을 import 하겠습니다!)

그리고 styled를 하기 위해, styled를 import 합니다.

import { styled } from "@mui/material/styles";

 

기존 메테리얼 디자인 2가 입힌 Button 입니다.

import "./styles.css";
import React from "react";
import Button from "@mui/material/Button";

export default function App() {
  return (
    <div className="App">
      <Button variant="contained">로그인</Button>
    </div>
  );
}

 

사용자가 styled를 정의한 Button입니다.

import "./styles.css";
import React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";

const MyButton = styled(Button)`
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  font-family: "Noto Sans KR";
`;

export default function App() {
  return (
    <div className="App">
      <MyButton variant="contained">로그인</MyButton>
    </div>
  );
}

 

01. sx parameter (MUI 가이드)

---

mui 가이드에 나온 것처럼 sx 인자를 보내서 커스터마이징 가능합니다.

import "./styles.css";
import React from "react";
import Button from "@mui/material/Button";

export default function App() {
  return (
    <div className="App">
      <Button variant="contained" sx={{ height: 100 }}>로그인</Button>
    </div>
  );
}

 이것도 당연히 가능합니다!

import "./styles.css";
import React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";

const MyButton = styled(Button)`
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  font-family: "Noto Sans KR";
`;

export default function App() {
  return (
    <div className="App">
      <MyButton variant="contained" sx={{ height: 100 }}>
        로그인
      </MyButton>
    </div>
  );
}

 

 

📌 현재는 기본값인 theme에서 styled를 하여 사용했지만, 다음은 theme를 커스터마이징 하는 법에 대해 기술할 예정입니다.