I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implement styling in TypeScript using the Material-UI library.
I diligently followed the instructions on https://material-ui.com/guides/typescript/ and created a theme:
import { createMuiTheme } from "@material-ui/core/styles";
export default function theme() {
return createMuiTheme({
palette: {
primary: {
main: "#607D8B",
light: "#CFD8DC",
dark: "#455A64",
contrastText: "#FFFFFF"
},
secondary: {
main: "#7C4DFF",
contrastText: "#212121"
}
}
})};
I also created styles:
import { green, red } from "@material-ui/core/colors";
import { createStyles, withStyles } from "@material-ui/core/styles";
import { Theme } from '@material-ui/core';
const useStyles = (theme: Theme) => createStyles({
// Various style definitions
});
export default withStyles(useStyles);
Next, I tried implementing these styles on a component:
// Component implementation code here
The error message I encountered is:
An argument of type 'Theme' is not assignable to parameter of type 'ComponentType<{ }>
If I try casting the type using:
const classes = useStyles<any>(theme);
It then raises an issue about the className property not existing, like classes.table, for example.
I find this whole situation very confusing and would greatly appreciate any help or insight!