Builderhub Platform Material UI Theme
- Custom colors
- Custom breakpoint
- Custom typography
- Custom MuiCssBaseline
- 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,
}));