Custom Theme not applying to components-CodePudding

Hello I am trying to apply my custom theme (simple color change) from Theme.js to the components in App.js. However, the components are still using the default theme colors. After some time, I haven't been able to change the primary and secondary colors.

Theme.js

import React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { orange } from "@mui/material/colors";

const theme = {
  palette: {
    primary: {
      main: orange[500],
    },
     secondary: orange[900],
  },
};

function Theme() {
  return theme;
}

export default Theme;

App.js

//import logo from "./logo.svg";
//import './App.css';
import LandingPage from "../LandingPage";
import About from "../About";
import React from "react";
import { ThemeProvider } from "@mui/styles";
import { createTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import { Routes, Route } from "react-router-dom";
import Navbar from "../Navbar";
import CourseHome from "../CourseHome";
import Theme from "../Theme";

const theme = createTheme(Theme);

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          width: "100%",
          height: "100%",
        }}
      >
        <Navbar />

        <Box
          sx={{
            height: "calc(100% - 4rem)",
            width: "100%",
          }}
        >
          <Routes>
            <Route exact path="/" element={<LandingPage />}></Route>
            <Route path="/about" element={<About />}></Route>
            <Route path="/home" element={<LandingPage />}></Route>
            <Route path="/course-home" element={<CourseHome />}></Route>
          </Routes>
        </Box>
      </Box>
    </ThemeProvider>
  );
}

export default App;

Example of use in Navbar:

<AppBar position="static" color="secondary">

I can't figure out why the components are still using the default theme colors.

CodePudding user response：

Try to change

import { ThemeProvider } from "@mui/styles";

import { ThemeProvider } from "@mui/material/styles";

CodePudding user response：

use this instead of what you have in theme.js

const theme = createTheme({
  palette: {
    primary: {
      main: orange[500],
    },
     secondary: orange[900],
  },
});