https://github.com/builderhub-platform/mui-theme
Builderhub Platform Material UI Theme
https://github.com/builderhub-platform/mui-theme
material-ui nextjs react theme-provider
Last synced: about 1 year ago
JSON representation
Builderhub Platform Material UI Theme
- Host: GitHub
- URL: https://github.com/builderhub-platform/mui-theme
- Owner: builderhub-platform
- Created: 2023-02-03T02:57:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T18:10:08.000Z (about 1 year ago)
- Last Synced: 2025-04-11T19:29:22.262Z (about 1 year ago)
- Topics: material-ui, nextjs, react, theme-provider
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@builderhub/mui-theme
- Size: 104 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @builderhub/mui-theme
[](https://github.com/eunchurn/mui-theme/actions/workflows/publish.yml)   [](https://opensource.org/licenses/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
```zsh
npm i @builderhub/mui-theme
```
- yarn
```zsh
yarn add @builderhub/mui-theme
```
- pnpm
```zsh
pnpm add @builderhub/mui-theme
```
## Usage
```tsx
import React from "react";
import { BuilderhubThemeProvider } from "@builderhub/mui-theme";
export function Wrapped() {
return (
);
}
```
### 기존 `colors`를 수정하는 방법
```tsx
- 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` 에서 사용
```tsx
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,
}));
```