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 --saveThis 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...>
);
}pass the settings you want to override as a parameter to createAppTheme()
export const theme = createAppTheme({
components: {
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "none",
},
},
},
},
});