Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme:
const theme = createMuiTheme({
palette: {
primary: {
main: blue[400]
},
secondary: {
main: green[500]
},
neutral: {
main: "#abcdef" // <-- NEW COLOR
}
}
})
According to the docs, you then use this theme in your ThemeProvider wrapper component whenever needed. However, if using typescript, one has to extend the Palette interface as shown in the example from the docs:
declare module "@material-ui/core/styles/createPalette" {
interface Palette {
neutral: Palette["primary"]
}
interface PaletteOptions {
neutral: PaletteOptions["primary"]
}
}
This is all making sense so far! No more complaints from typescript about the new property in the palette. Now, it's time to test out the new color! But when trying to use it in a component:
<IconButton color="neutral" onClick={onClose}>
<CloseIcon />
</IconButton>
And here's where confusion sets in. Typescript raises an issue! The 'color' prop doesn't recognize "neutral" as a valid option.
As a newcomer, I might be overlooking something obvious.
I believe that there should be a simple solution to get colors recognized correctly without resorting to ts-ignore. Can anyone provide some insight?
{/*
// @ts-ignore */}
<IconButton color="neutral" ...
(hoping to avoid this workaround)
I'm sure there's a straightforward fix to use colors the proper way, I just need a little guidance. Please assist!