I'm trying to make these colors alternate according to the pokemon's type.
But I do not know how... Any idea!? here is where i am trying to create the logic
[here is where the palette should be played
inside the ```<Box sx={{ bgcolor: 'typecolor.main' }}
The MUI palette is extendable, but you need to do a couple of things to create a new color and apply to your Box component.
Define a theme with a custom color variable. You can use augmentColor() to generate the PaletteColor so it can be consumed in your Box then pass that new color into your component
import { red } from "@mui/material/colors";
const { palette } = createTheme();
const theme = createTheme({
palette: {
myCustomColor: palette.augmentColor({ color: red }),
// Use this code if you want to use an arbitrary color
// myCustomColor: palette.augmentColor({
// color: {
// main: "#f0000f"
// }
// })
}
});