Utilizing Different Themes Based on Route with React-Router and Material-UI

Question

Utilizing Different Themes Based on Route with React-Router and Material-UI

I'm currently learning how to utilize the Material-UI library. As I explore its capabilities, I have discovered that I can use createStyles within a component to style it, and I can also leverage createMuiTheme to establish a global theme. My goal is to create a theme using createMuiTheme that incorporates various primary and secondary color combinations.

My project involves developing a web application that showcases NHL team statistics. I am dynamically generating a component to display team statistics based on React-Router and the URL of the page. For instance, visiting /rangers will show the statistics for the New York Rangers, and visiting /bruins will display the Boston Bruins' stats.

To achieve this, I am using React-Router's useLocation function. By extracting the team name from the URL using useLocation when the user navigates to a specific team page, I can make a GET request for that team's statistics to be retrieved and displayed.

My aim is to create a Material-UI theme that dynamically adjusts the primary and secondary colors on the page based on the selected team. For example, when on the /rangers page, I want the primary color to be blue and the secondary color to be red (representing the Rangers team colors). If the user then navigates to /bruins, I want the primary and secondary colors to switch to the Bruins' team colors (black and gold).

const Theme = createMuiTheme({
    palette: {
        primary: {
          // Setting primary color to Rangers blue when on '/rangers'
          rangers: '#0038a8',
          // Setting primary color to Bruins gold when on '/bruins'
          bruins: '#fcb514'
        },
        secondary: {
          // Setting secondary color to Rangers red when on '/rangers'
          rangers: '#ce1126',
          // Setting secondary color to Bruins black when on '/bruins'
          bruins: '#111'
        }
    });

Is there a way to dynamically adjust theme colors in Material-UI based on the current React-Router page, such as changing the theme colors to reflect the team colors when navigating to a specific team's page like /rangers or /bruins? I would like to implement this using useLocation in a similar manner to how I handle the GET request.

With a total of 31 different teams/pages to consider, dynamically managing theme colors is much more efficient than creating separate components with different styles for each team.

css reactjs react-router material-ui react-router-dom

Answer 1

Answer №1

If you're looking to customize your theme, understanding how components are rendered in the component tree is crucial. However, I have put together a simple example to get you started on modifying your theme.

https://codesandbox.io/s/material-demo-ilqxp

To achieve this, you'll need to create a customized theme provider using the Context API so that it can be accessed from anywhere in your application. This will allow you to modify the theme in any component.

export function ThemeProvider(props) {
  const { children } = props;

  const [themeOptions, dispatch] = React.useReducer((state, action) => {
    switch (action.type) {
      case "CHANGE":
        return {
          ...state,
          colors: action.payload.colors || "DEFAULT"
        };
      default:
        throw new Error(`Unrecognized type ${action.type}`);
    }
  }, themeInitialOptions);

  const { colors } = themeOptions;
  const theme = React.useMemo(() => {
    let palette;

    switch (colors) {
      case "RANGERS":
        palette = {
          primary: { main: "#0038a8" },
          secondary: { main: "#ce1126" }
        };
        break;
      case "BRUINS":
        palette = {
          primary: { main: "#fcb514" },
          secondary: { main: "#111" }
        };
        break;
      default:
        palette = {
          primary: { main: "#673ab7" },
          secondary: { main: "#111" }
        };
        break;
    }

    const nextTheme = createMuiTheme({ palette });
    return nextTheme;
  }, [colors]);

  return (
    <MuiThemeProvider theme={theme}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </MuiThemeProvider>
  );
}

Once you have set up the theme provider, you can create a common entry point for making changes.

export function useChangeTheme() {
  const dispatch = React.useContext(DispatchContext);
  return React.useCallback(
    themeOptions => dispatch({ type: "CHANGE", payload: themeOptions }),
    [dispatch]
  );
}

Lastly, you can utilize this functionality in the top component of your React tree by:

  const changeTheme = useChangeTheme();
  const location = useLocation();

  React.useEffect(() => {
    let path = location && location.pathname.split("/");
    let team = path && path[1];
    changeTheme({ colors: team.toUpperCase() });
  }, [changeTheme, location]);

Hopefully, this guide serves as a helpful starting point for you.

Answer 2

If you're looking to customize your theme, understanding how components are rendered in the component tree is crucial. However, I have put together a simple example to get you started on modifying your theme.

https://codesandbox.io/s/material-demo-ilqxp

To achieve this, you'll need to create a customized theme provider using the Context API so that it can be accessed from anywhere in your application. This will allow you to modify the theme in any component.

export function ThemeProvider(props) {
  const { children } = props;

  const [themeOptions, dispatch] = React.useReducer((state, action) => {
    switch (action.type) {
      case "CHANGE":
        return {
          ...state,
          colors: action.payload.colors || "DEFAULT"
        };
      default:
        throw new Error(`Unrecognized type ${action.type}`);
    }
  }, themeInitialOptions);

  const { colors } = themeOptions;
  const theme = React.useMemo(() => {
    let palette;

    switch (colors) {
      case "RANGERS":
        palette = {
          primary: { main: "#0038a8" },
          secondary: { main: "#ce1126" }
        };
        break;
      case "BRUINS":
        palette = {
          primary: { main: "#fcb514" },
          secondary: { main: "#111" }
        };
        break;
      default:
        palette = {
          primary: { main: "#673ab7" },
          secondary: { main: "#111" }
        };
        break;
    }

    const nextTheme = createMuiTheme({ palette });
    return nextTheme;
  }, [colors]);

  return (
    <MuiThemeProvider theme={theme}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </MuiThemeProvider>
  );
}

Once you have set up the theme provider, you can create a common entry point for making changes.

export function useChangeTheme() {
  const dispatch = React.useContext(DispatchContext);
  return React.useCallback(
    themeOptions => dispatch({ type: "CHANGE", payload: themeOptions }),
    [dispatch]
  );
}

Lastly, you can utilize this functionality in the top component of your React tree by:

  const changeTheme = useChangeTheme();
  const location = useLocation();

  React.useEffect(() => {
    let path = location && location.pathname.split("/");
    let team = path && path[1];
    changeTheme({ colors: team.toUpperCase() });
  }, [changeTheme, location]);

Hopefully, this guide serves as a helpful starting point for you.

Utilizing Different Themes Based on Route with React-Router and Material-UI

Answer №1

Similar questions

Is there a way to prevent a page from rendering until the necessary data is retrieved?

The functionality of WrapAll is not functioning properly in React JS

Guide to organizing documents using an interface structure

Understanding how to utilize environment variables in React.js can drastically improve

I am facing an issue with my useFetch hook causing excessive re-renders

transferring data between react components

Expanding a feature that modifies the CSS properties of every input element

Storing the value of e.currentTarget in a TypeScript variable with a fixed data type

CSS and jQuery UI URLs are not resolving properly in MVC framework after deployment

In the case that the prop is empty or undefined, display an error message before rendering the full component

Invoke a function within the redux reducer

Is it possible to monitor nested object modifications within React Context?

Is it possible to amalgamate CSS declarations together?

Create a single declaration in which you can assign values to multiple const variables

Using jQuery to remove the 'active class' when the mouse is not hovering

Issue with deprecated TypeORM connection and isConnected functions

"Efficiently manage search suggestions and arrange outcomes for autofill text input utilizing jQuery

Capable of generating accounts using Postman, experiencing difficulties with creating accounts from React

Issue alert before running tests on component that includes a Material UI Tooltip

Some of the items in the dropdown menu are not fully displayed