@builderhub/mui-theme
TypeScript icon, indicating that this package has built-in type declarations

1.2.5 • Public • Published

@builderhub/mui-theme

Publish Package to npmjs npm npm License: MIT

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,
}));

Package Sidebar

Install

npm i @builderhub/mui-theme

Weekly Downloads

64

Version

1.2.5

License

MIT

Unpacked Size

17.1 kB

Total Files

8

Last publish

Collaborators

  • ushiii111798
  • dlruawo07
  • eunchurn
  • builderhub-admin