[REACT] Material-UI Button 컴포넌트 사용법

React 개발 시 bootstrap과 같은 오픈 소스 프레임워크와 함께 많이 사용되는 것이 'Material UI'이다.

 

기본적인 컴포넌트를 쉽게 사용할 수 있다는 장점을 갖는다.

 

오늘은 여러 컴포넌트 중 버튼에 대해 작성하려고 한다.

 

Material UI 의 Button을 사용하기 위해서는 아래의 단계를 거쳐야 한다.

 

1. 터미널에서 아래와 같은 명령어를 통해 material-ui를 install한다.

npm install @material-ui/core

 

2. Button을 사용할 페이지에 임포트한다.

import React from "react";
import Button from "@material-ui/core/Button";

 

3. Button을 사용하여 retrun을 구현한다.

import "bootstrap/dist/css/bootstrap.min.css"
import React from "react"
import { Link } from "gatsby"
import Button from "@material-ui/core/Button"

// import { css } from "@emotion/react"

export default function Home() {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <Link to={`/first-page`}>
          <Button variant="link">go to first page</Button>
        </Link>
        <Link to={`/second-page`}>
          <Button variant="link">go to second page</Button>
        </Link>
      </div>
    </div>
  )
}

페이지는 위와 같이 구현되고 마우스를 버튼 위로 올려두면 색이 변하는 것을 확인할 수 있다.

Button을 Link로 한  번 더 감싸서 페이지로 이동될 수 있도록 구현했다.

 

버튼이 감싸고 있는 글자를 보면 모두 대문자로 구현되어 있다.

 

 

대문자가 아닌 대소문자 구별된 상태에선 구현이 불가능할까?

 

import "bootstrap/dist/css/bootstrap.min.css"
import React from "react"
import { Link } from "gatsby"
import Button from "@material-ui/core/Button"

// import { css } from "@emotion/react"

const buttonStyle = {
  textTransform: "none", // 대문자 변환 스타일 제거
}

export default function Home() {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <Link to={`/sheet-list`}>
          <Button variant="link" style={buttonStyle}>
            go to first page
          </Button>
        </Link>
        <Link to={`/sheet-list`}>
          <Button variant="link" style={buttonStyle}>
            go to second page
          </Button>
        </Link>
      </div>
    </div>
  )
}

Material-UI의 Button 컴포넌트는 기본적으로 텍스트를 대문자로 변환하여 출력해주는 스타일이 적용되어 있기 때문에 이에 대해 textTransform: 'none' 스타일을 추가함으로서 버튼 내용의 대문자 변환이 되지 않도록 할 수 있다.

 

버튼 컴포넌트는 여러 설정이 가능하다. 필요에 따라 아래 공식 문서를 통해 작성하면 된다.

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

React Button component - Material UI