Material UI (v1)에서 버튼 색상을 사용자 정의하고 Bootstrap과 유사한 테마를 생성하는 방법

title_thumbnail(Material UI (v1)에서 버튼 색상을 사용자 정의하고 Bootstrap과 유사한 테마를 생성하는 방법)

Table of Contents

Material UI 사용자 정의: 버튼 색상 사용자 정의하기

Material UI (v1)에서 버튼 색상을 수정하는 데 어려움을 겪고 Bootstrap과 유사한 테마를 설정하고자하는 경우, 올바른 곳에 왔습니다. 이 블로그 포스트에서는 Material UI에서 버튼 색상을 사용자 정의하는 다양한 옵션과 원하는 효과를 얻는 방법을 살펴보겠습니다.

옵션 1: Material UI v5에서 색상 사용자 정의하기

Material UI v5에서 버튼에 사용자 정의 색상을 만드는 것은 직관적이며, 새로운 테마를 생성하여 달성할 수 있습니다. 기본 및 보조 색상은 createTheme 함수를 사용하여 정의할 수 있습니다. 다음은 예시입니다:

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

const theme = createTheme({
  palette: {
    anger: createColor('#F40B27'),
    apple: createColor('#5DBA40'),
    steelBlue: createColor('#5C76B7'),
    violet: createColor('#BC00A3'),
  },
});

테마에서 사용자 정의 색상을 정의한 후에는 색상 prop을 지정하여 버튼에서 사용할 수 있습니다. 예를 들면:

<Button color="anger" variant="contained">
  anger
</Button>

TypeScript를 사용하는 경우, 테마에서 정의한 색상에 대한 추가적인 타입을 추가하여 타입 오류를 방지하세요.

옵션 2: 인라인으로 버튼 스타일 사용자 정의하기

인라인 스타일링을 선호하는 경우, style prop을 사용하여 버튼 컴포넌트에 직접 사용자 지정 스타일을 적용할 수 있습니다. 다음은 예시입니다:

<Button
    style={{
        borderRadius: 35,
        backgroundColor: "#21b6ae",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
>
    Submit
</Button>

옵션 3: MuiThemeProvider를 사용하여 버튼 색상 사용자 정의하기

다른 방법은 material-ui 패키지에서 MuiThemeProvider를 사용하는 것입니다. 이 접근 방식을 사용하면 각 버튼 색상에 대해 별도의 테마를 정의하고 적용할 수 있습니다. 다음은 예시입니다:

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import Button from 'material-ui/Button';
import { red, blue } from 'material-ui/colors';

const redTheme = createMuiTheme({ palette: { primary: red } });
const blueTheme = createMuiTheme({ palette: { primary: blue } });

class Buttons extends Component {
  render = () => (
    <div className="ledger-actions-module">
      <MuiThemeProvider theme={redTheme}>
        <Button color="primary" variant="raised">
          Delete
        </Button>
      </MuiThemeProvider>
      <MuiThemeProvider theme={blueTheme}>
        <Button color="primary" variant="raised">
          Update
        </Button>
      </MuiThemeProvider>
    </div>
  )
}

옵션 4: 사용자 정의 버튼 컴포넌트 만들기

위의 옵션 중 어느 것도 요구 사항에 맞지 않는 경우, styled-components와 material-ui와 같은 라이브러리를 사용하여 사용자 정의 버튼 컴포넌트를 만들 수 있습니다. 이 접근 방식은 버튼의 스타일링과 테마 설정에서 더 많은 유연성을 제공합니다. 다음은 예시입니다:

import React from "react";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import capitalize from "lodash/capitalize";

import MuiButton, {
  ButtonProps as MuiButtonProps
} from "@material-ui/core/Button";

export type ColorTypes =
  | "primary"
  | "secondary"
  | "error"
  | "success"
  | "warning"
  | "default"
  | "inherit"
  | "info";

type ButtonProps = { color: ColorTypes } & Omit<MuiButtonProps, "color">;

const useStyles = makeStyles<Theme>(theme =>
  createStyles({
    outlinedSuccess: {
      borderColor: theme.palette.success.main,
      color: theme.palette.success.main
    },
    outlinedError: {
      borderColor: theme.palette.error.main,
      color: theme.palette.error.main
    },
    // ... 다른 색상에 대한 스타일 계속 작성
  })
);

const Button: React.FC<ButtonProps> = ({ children, color, ...props }) => {
  const classes = useStyles();
  const className = classes?.[`${props.variant}${capitalize(color)}`];
  
  return (
    <MuiButton {...props} color={color} className={className}>
      {children}
    </MuiButton>
  );
};

// 사용법: <Button variant="contained" color="success">Click me</Button>

이러한 옵션으로 Material UI v1에서 버튼 색상을 사용자 정의하는 여러 가지 방법이 제공됩니다. 요구 사항에 가장 적합한 방법을 선택하고 버튼에 원하는 모양과 느낌을 구현하세요.

이 블로그 포스트에 안내된 단계를 따라가면 Material UI에서 버튼 색상을 쉽게 사용자 정의하고 시각적으로 매력적이고 일관된 디자인을 애플리케이션에 적용할 수 있게 됩니다.

참고 자료 :

reactjs