Skip to content

bcgov/EPIC.themeLib

Repository files navigation

Library for sharing MUI theme settings and design specs across different codebases in the EPIC system.

npm version

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",
        },
      },
    },
  },
});

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published