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
를 사용합니다.
react@^18
react-dom@^18
@mui/material^5
- npm
npm i @builderhub/mui-theme
- yarn
yarn add @builderhub/mui-theme
- pnpm
pnpm add @builderhub/mui-theme
import React from "react";
import { BuilderhubThemeProvider } from "@builderhub/mui-theme";
export function Wrapped() {
return (
<BuilderhubThemeProvider>
<App />
</BuilderhubThemeProvider>
);
}
- 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;
}
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,
}));