Estoy tratando de personalizar los colores de la paleta para mi proyecto, pero solo puedo usar el atributo principal y no otro. Estoy usando MUI bajo JavaScript no Typescript
import './App.css'; import {BrowserRouter as Router, Route, Routes} from 'react-router-dom' import Navbar from './components/Navbar/Navbar'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Home from './components/Home/Home'; import Contact from './components/Contact/Contact'; import Pricing from './components/Pricing/Pricing'; import About from './components/About/About'; const theme = createTheme({ palette: { primary: { light: '#f5f6fc', //highlight main: '#f6f6f6', //site bg gray...this works (light, dark doesn't) dark: '#000629', //navbar items contrastText: '#fff', //main text large font }, secondary: { light: '#cdd0d9', //paragraph text dark gray main: '#dce6ff', // for content bg light blue......this works (light, dark doesn't) dark: '#ba000d', //hover buttons contrastText: '#000', }, }, });Para agregar múltiples colores primarios/secundarios, deberá usar variables personalizadas .
Reemplazar primary por myPrimaryColor o algo de su elección lo convertirá en una variable personalizada que se puede usar en el futuro.
const theme = createTheme({ myPrimaryColor: { success: 'green', danger: 'red', }, });seguido por
`theme.myPrimaryColor.success`