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.
use this instead of what you have in theme.js
const theme = createTheme({
palette: {
primary: {
main: orange[500],
},
secondary: orange[900],
},
});