My development environment consists of node v.12.18.4 and TypeScript 4.5, however, I encountered an error during compilation:
Compilation Failed.
/Users/mariana/Augment Therapy/at-app/src/components/nav-item.tsx
TypeScript error in /Users/mariana/Augment Therapy/at-app/src/components/nav-item.tsx(14,30):
Argument of type '(theme: Theme) => { item: { display: string; paddingTop: number; paddingBottom: number; }; itemLeaf: { display: string; paddingTop: number; paddingBottom: number; }; button: { padding: string; justifyContent: string; textTransform: "none"; letterSpacing: number; width: string; color: string; }; ... 4 more ...; activ...' is not assignable to parameter of type 'Styles<Theme, {}, "button" | "label" | "icon" | "active" | "item" | "itemLeaf" | "buttonLeaf" | "expandIcon">'.
Type '(theme: Theme) => { item: { display: string; paddingTop: number; paddingBottom: number; }; itemLeaf: { display: string; paddingTop: number; paddingBottom: number; }; button: { padding: string; justifyContent: string; textTransform: "none"; letterSpacing: number; width: string; color: string; }; ... 4 more ...; activ...' is not assignable to type 'StyleRulesCallback<Theme, {}, "button" | "label" | "icon" | "active" | "item" | "itemLeaf" | "buttonLeaf" | "expandIcon">'. Call signature return types '{ item: { display: string; paddingTop: number; paddingBottom: number; }; itemLeaf: { display: string; paddingTop: number; paddingBottom: number; }; button: { padding: string; justifyContent: string; textTransform: "none"; letterSpacing: number; width: string; color: string; }; ... 4 more ...; active: { ...; }; }' and 'StyleRules<{}, "button" | "label" | "icon" | "active" | "item" | "itemLeaf" | "buttonLeaf" | "expandIcon">' are incompatible.
The types of 'active' are incompatible between these types.
Type '{ color: string; background: string; fontWeight: Property.FontWeight | undefined; '& $icon': { color: string; }; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
Type '{ color: string; background: string; fontWeight: Property.FontWeight | undefined; '& $icon': { color: string; }; }' is not assignable to type 'CreateCSSProperties<{}>'.
Types of property 'fontWeight' are incompatible.
Type 'FontWeight | undefined' is not assignable to type 'FontWeightProperty | PropsFunc<{}, FontWeightProperty | undefined> | undefined'.
Type 'string & {}' is not assignable to type 'FontWeightProperty | PropsFunc<{}, FontWeightProperty | undefined> | undefined'.
Type 'string & {}' is not assignable to type '"lighter"'. TS2345
12 | import ExpandLessIcon from '@material-ui/icons/ExpandLess';
13 |
> 14 | const useStyles = makeStyles((theme: Theme) => ({
| ^
15 | item: {
16 | display: 'block',
17 | paddingTop: 0,
@Diego below pointed out the CSS issue at hand. Does anyone have any solutions or know how to set my CSS type to version 3.0.9? Thank you.