@builderhub/mui-theme

Builderhub Platform Material UI Theme

• Custom colors
• Custom breakpoint
• Custom typography
• Custom MuiCssBaseline

React.js 혹은 Next.js 프로젝트에서 Builderhub UI/UX 팀에서 정의한 Color scheme과 breakpoint 등을 정의한 Material UI ThemeProvider를 사용합니다.

Peer Dependencies

• react@^18
• react-dom@^18
• @mui/material^5

Installation

• npm

npm i @builderhub/mui-theme

• yarn

yarn add @builderhub/mui-theme

• pnpm

pnpm add @builderhub/mui-theme

Usage

import React from "react";
import { BuilderhubThemeProvider } from "@builderhub/mui-theme";

export function Wrapped() {
  return (
    <BuilderhubThemeProvider>
      <App />
    </BuilderhubThemeProvider>
  );
}

기존 colors를 수정하는 방법

- import { colors } from "context";
+ import { useTheme } from "@mui/material";

// ...omitted
function Component() {
  const { palette } = useTheme();

  - const oldColor = colors.purple_10;
  + const newColor = palette.purple_10;
}

styled 에서 사용

import { styled, Button } from "@mui/material";

export const CustomButton = styled(Button)(({ theme }) => ({
  border: 0,
  background: theme.palette.purple_10,
  width: "5rem",
  height: "2rem",
  borderRadius: theme.shape.borderRadius,
}));