epic.theme
v1.0.11
Published
Theme config package to be used across multiple EPIC repositories
Downloads
1,085
Readme
Library for sharing MUI theme settings and design specs across different codebases in the EPIC system.
At the root folder of the frontend codebase of your repo, install the package using the following:
npm i epic.theme --save
This will add the base theme config to your codebase, which can be used as given below:
in the styles/theme.tsx file
import { createAppTheme } from '@bcgov/epic.theme';
// Any theme overrides should be passed into the createAppTheme.
export const theme = createAppTheme({});
and add this as a ThemeProvider in the main.tsx file:
...
import { theme } from "@/styles/theme";
...
// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<OtherProviders...>
<ThemeProvider theme={theme}>
<...></...>
</ThemeProvider>
</OtherProviders...>
);
}
To override base theme config in individual codebase:
pass the settings you want to override as a parameter to createAppTheme()
export const theme = createAppTheme({
components: {
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "none",
},
},
},
},
});