React Material - 버튼 색깔, 아웃라인 변경하기 (Change Mui Button Color on Hover)

리액트 전체 링크

 

참고

- 예제 확인 링크

- mui react button

- mui react palette

 

Material의 팔레트를 보면 기본 색상은 다음과 같다.

 

버튼의 종류(variant)는 크게 text, contained, outlined로 나뉜다.

import React from "react";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";

const ButtonTest = () => {
  return (
    <div>
      <Stack sx={{m: 1}} spacing={2} direction="row">
        <Button variant="text" color="primary">
          Primary
        </Button>
        <Button variant="text" color="secondary">
          Secondary
        </Button>
        <Button variant="text" color="error">
          Error
        </Button>
        <Button variant="text" color="warning">
          Warning
        </Button>
        <Button variant="text" color="info">
          Info
        </Button>
        <Button variant="text" color="success">
          Success
        </Button>
      </Stack>
      <Stack sx={{m: 1}} spacing={2} direction="row">
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <Button variant="contained" color="secondary">
          Secondary
        </Button>
        <Button variant="contained" color="error">
          Error
        </Button>
        <Button variant="contained" color="warning">
          Warning
        </Button>
        <Button variant="contained" color="info">
          Info
        </Button>
        <Button variant="contained" color="success">
          Success
        </Button>
      </Stack>
      <Stack sx={{m: 1}} spacing={2} direction="row">
        <Button variant="outlined" color="primary">
          Primary
        </Button>
        <Button variant="outlined" color="secondary">
          Secondary
        </Button>
        <Button variant="outlined" color="error">
          Error
        </Button>
        <Button variant="outlined" color="warning">
          Warning
        </Button>
        <Button variant="outlined" color="info">
          Info
        </Button>
        <Button variant="outlined" color="success">
          Success
        </Button>
      </Stack>
    </div>
  );
};

export default ButtonTest;

 

그 외에 커스터마이징 하고 싶다면 Button에 sx 컴포넌트를 추가하면 된다.

color와 borderColor를 각각 검은색, 회색으로 만들어보자.

<Button
  sx={{
    m : 1,
    color: "black",
    borderColor: "gray",
  }}
  variant="outlined"
>
  Custom Button
</Button>

 

버튼이 잘 만들어졌지만, 마우스를 버튼에 가져다대면(hover),

버튼의 outline이 파란색으로 변해서 매우 부자연스럽다.

 

이때는 sx 컴포넌트 안에 :hover를 추가하여 다시 설정을 하면 된다.

아래의 코드는 마우스 오버를 할 경우 검은색 아웃 라인으로 만드는 코드다.

<Button
  sx={{
    m : 1,
    color: "black",
    borderColor: "gray",
    ":hover": { borderColor: "black" },
  }}
  variant="outlined"
>
  Custom Button
</Button>

 

이제 outline이 검은색으로 변경되어 자연스러운 버튼이 되었다.

 

전체 코드는 다음과 같다.

import React from "react";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";

const ButtonTest = () => {
  return (
    <div>
      <Button
        sx={{
          m: 1,
          color: "black",
          borderColor: "gray",
          ":hover": { borderColor: "black" },
        }}
        variant="outlined"
      >
        Custom Button
      </Button>
      <Stack sx={{ m: 1 }} spacing={2} direction="row">
        <Button variant="text" color="primary">
          Primary
        </Button>
        <Button variant="text" color="secondary">
          Secondary
        </Button>
        <Button variant="text" color="error">
          Error
        </Button>
        <Button variant="text" color="warning">
          Warning
        </Button>
        <Button variant="text" color="info">
          Info
        </Button>
        <Button variant="text" color="success">
          Success
        </Button>
      </Stack>
      <Stack sx={{ m: 1 }} spacing={2} direction="row">
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <Button variant="contained" color="secondary">
          Secondary
        </Button>
        <Button variant="contained" color="error">
          Error
        </Button>
        <Button variant="contained" color="warning">
          Warning
        </Button>
        <Button variant="contained" color="info">
          Info
        </Button>
        <Button variant="contained" color="success">
          Success
        </Button>
      </Stack>
      <Stack sx={{ m: 1 }} spacing={2} direction="row">
        <Button variant="outlined" color="primary">
          Primary
        </Button>
        <Button variant="outlined" color="secondary">
          Secondary
        </Button>
        <Button variant="outlined" color="error">
          Error
        </Button>
        <Button variant="outlined" color="warning">
          Warning
        </Button>
        <Button variant="outlined" color="info">
          Info
        </Button>
        <Button variant="outlined" color="success">
          Success
        </Button>
      </Stack>
    </div>
  );
};

export default ButtonTest;

 

결과는 링크에서 확인하자.