Estilos Personalizados

Como implementarlo con otra paleta de colores fuera de los definidos por diseño

El StyleSystemProvider tambien tiene la opcion de cargar sus archivo de scss custom para que los utilice a la hora de levantar la aplicacion. Para ello se debe enviar un parametro que se llama scssContent.

Este parametro toma un archivo scss para enviarlo al StyleSystemProvider dandole la instruccion que ese es el archivo de estilos que debe utilizar , es importante enviarlo ya que si no se hace tomara por default los de Andreani.

Utilizar paleta de colores Custom

Para lograr importar y utilizar la paleta de colores custom se debe tener en cuenta lo siguiente.

1. Se debe importar el archivo de scss que se desea utilizar dentro de la aplicacion.

   import scssContent from "./green.module.scss";
   

   

2. Enviar ese import, en este caso es scssContent como parametro al StyleSystemProvider.

       root.render(
           <BrowserRouter>
               <StyleSystemProvider scssContent={scssContent}>
               <Provider store={store}>
                   <CssBaseline />
                   <App msalInstance={msalInstance} />
               </Provider>
               </StyleSystemProvider>
           </BrowserRouter>
       );
   

   Utilizar archivo DarkCustom

   Para utilizar el modo darkCustom proveer su archivo de darkMode como se ve en la imagen y utilizar la logica teniendo en cuenta el nombre del archivo ya que va lo pisar para levantar el mismo.

   

   Warning

   Utilizar la misma logica del boton que se menciono anteriormente para modificar el flag en este ejemplo con el valor de la variable darkModeCustom, es la encargada de importar el archivo darkCustom que desees utilizar.

   la logica quedaria siguiendo el ejemplo de esta manera:

       const darkModeCustom = true; // Obtén el valor de darkMode desde la aplicación consumidora , de localStorage por ejemplo
   
       if (darkModeCustom) import("./dark.module.scss");
   
       root.render(
       <BrowserRouter>
           <StyleSystemProvider>
           <Provider store={store}>
               <CssBaseline />
               <App msalInstance={msalInstance} />
           </Provider>
           </StyleSystemProvider>
       </BrowserRouter>
       );
   

En resumen con este ejemplo dejamos como quedaria el index para ayuda al desarrollador.

Paleta de Colores CustomCon paleta de colores Dark Custom

      import { createRoot } from "react-dom/client";
      import { StyleSystemProvider } from "@architecture-it/stylesystem";
      import { CssBaseline } from "@mui/material";
      import { BrowserRouter } from "react-router-dom";
      import { Provider } from "react-redux";
      import { store } from "app/store";
      import { msalInstance } from "msalInstance";
      import App from "./App";
      import rum from "./monitor";
      import scssContent from "./green.module.scss";

      rum.setInitialPageLoadName("Home");

      const container = document.getElementById("root") as HTMLElement;

      const root = createRoot(container); 


      root.render(
      <BrowserRouter>
          <StyleSystemProvider scssContent={scssContent} >
          <Provider store={store}>
              <CssBaseline />
              <App msalInstance={msalInstance} />
          </Provider>
          </StyleSystemProvider>
      </BrowserRouter>
      );

    import { createRoot } from "react-dom/client";
    import { StyleSystemProvider } from "@architecture-it/stylesystem";
    import { CssBaseline } from "@mui/material";
    import { BrowserRouter } from "react-router-dom";
    import { Provider } from "react-redux";
    import { store } from "app/store";
    import { msalInstance } from "msalInstance";

    import App from "./App";
    import rum from "./monitor";
    import scssContent from "./green.module.scss";

    rum.setInitialPageLoadName("Home");

    const container = document.getElementById("root") as HTMLElement;

    const root = createRoot(container);

    root.render(
    <BrowserRouter>
      <StyleSystemProvider >
        <Provider store={store}>
            <CssBaseline />
            <App msalInstance={msalInstance} />
        </Provider>
      </StyleSystemProvider>
    </BrowserRouter>
    );