Hola, estoy tratando de aplicar mi tema personalizado (cambio de color simple) de Theme.js a los componentes en App.js. Sin embargo, los componentes siguen utilizando los colores de tema predeterminados. Después de un tiempo, no he podido cambiar los colores primarios y secundarios.
Tema.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;Aplicación.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;Ejemplo de uso en Navbar:
<AppBar position="static" color="secondary">No puedo entender por qué los componentes todavía usan los colores de tema predeterminados.
usa esto en lugar de lo que tienes en theme.js
const theme = createTheme({ palette: { primary: { main: orange[500], }, secondary: orange[900], }, });