You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
MUI throws type error when style properties such as position or pointerEvents are included in my functional component.
The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.
Issues which seemed they could be related include #8726 and #9272 but both of them are questions.
Current Behavior 😯
Type Error
Expected Behavior 🤔
No Type Error or better error messaging
Steps to Reproduce 🕹
Spent about 10 minutes trying to reproduce in the TS code sandbox starter provided without luck so I'm going to just drop my code here. Most of it was copied straight out of the examples on the MUI website.
SearchBar.tsx
importReact,{FC}from"react";import{Theme,WithStyles,withStyles,InputBase}from"@material-ui/core";import{Magnify}from"mdi-material-ui";conststyles=(theme: Theme)=>({search: {borderRadius: theme.shape.borderRadius,border: "1px solid",borderColor: theme.palette.tbd.borderColor,marginRight: theme.spacing(2),marginLeft: 0,width: "100%",},searchIcon: {padding: theme.spacing(0,2),height: "100%",pointerEvents: "none",display: "flex",alignItems: "center",justifyContent: "center",},inputRoot: {color: "inherit",width: "100%",},inputInput: {padding: theme.spacing(1,1,1,0),// vertical padding + font size from searchIconpaddingLeft: `calc(1em + ${theme.spacing(4)}px)`,transition: theme.transitions.create("width"),width: "100%",},});interfaceSearchBarPropsextendsWithStyles<typeofstyles>{}constSearchBar: FC<SearchBarProps>=({ classes })=>(<divclassName={classes.search}><divclassName={classes.searchIcon}><Magnify/></div><InputBaseplaceholder="Waar ben je naar op zoek?"classes={{root: classes.inputRoot,input: classes.inputInput,}}inputProps={{"aria-label": "search"}}/></div>);exportdefaultwithStyles(styles)(SearchBar);
Steps:
Observe TypeError
Remove pointerEvents
Observe TypeError disappears
Add position prop with value to any class
Observe TypeError returns
Context 🔦
I'm trying to use MUI to with TypeScript using examples from the website and it's causing TypeErrors as shown in the below image and copied into text.
Expand to show type error when hovering over "typeof styles" squiggle
Type '(theme: Theme) => { search: { borderRadius: number; border: string; borderColor: any; marginRight: number; marginLeft: number; width: string; }; searchIcon: { padding: string; height: string; pointerEvents: string; display: string; alignItems: string; justifyContent: string; }; inputRoot: { ...; }; inputInput: { ......' does not satisfy the constraint 'string | Record<any, CSSProperties | CreateCSSProperties<any> | PropsFunc<any, CreateCSSProperties<any>>> | StyleRulesCallback<...>'.
Type '(theme: Theme) => { search: { borderRadius: number; border: string; borderColor: any; marginRight: number; marginLeft: number; width: string; }; searchIcon: { padding: string; height: string; pointerEvents: string; display: string; alignItems: string; justifyContent: string; }; inputRoot: { ...; }; inputInput: { ......' is not assignable to type 'StyleRulesCallback<any, any, any>'.
Type '{ search: { borderRadius: number; border: string; borderColor: any; marginRight: number; marginLeft: number; width: string; }; searchIcon: { padding: string; height: string; pointerEvents: string; display: string; alignItems: string; justifyContent: string; }; inputRoot: { ...; }; inputInput: { ...; }; }' is not assignable to type 'Record<any, CSSProperties | CreateCSSProperties<any> | PropsFunc<any, CreateCSSProperties<any>>>'.
Property 'searchIcon' is incompatible with index signature.
Type '{ padding: string; height: string; pointerEvents: string; display: string; alignItems: string; justifyContent: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<any> | PropsFunc<any, CreateCSSProperties<any>>'.
Type '{ padding: string; height: string; pointerEvents: string; display: string; alignItems: string; justifyContent: string; }' is not assignable to type 'CreateCSSProperties<any>'.
Types of property 'pointerEvents' are incompatible.
Type 'string' is not assignable to type '"inherit" | "auto" | "-moz-initial" | "initial" | "revert" | "unset" | "none" | "all" | "fill" | "stroke" | "visible" | "painted" | "visibleFill" | "visiblePainted" | "visibleStroke" | PropsFunc<...>'.ts(2344)
Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io templatemay be a good starting point. Thank you!
@oliviertassinari thanks that was indeed the issue. I'd looked over that page but incorrectly thought createStyles and withStyles were mutually exclusive—though I needed to use both to avoid the type widening issue mentioned. Figured this was something someone could eyeball who works with the codebase rather than burning cycles creating a minimal test (the TS boilerplate example isn't using a suitable sandbox IMO).
MUI throws type error when style properties such as
position
orpointerEvents
are included in my functional component.Issues which seemed they could be related include #8726 and #9272 but both of them are questions.
Current Behavior 😯
Type Error
Expected Behavior 🤔
No Type Error or better error messaging
Steps to Reproduce 🕹
Spent about 10 minutes trying to reproduce in the TS code sandbox starter provided without luck so I'm going to just drop my code here. Most of it was copied straight out of the examples on the MUI website.
SearchBar.tsx
Steps:
pointerEvents
position
prop with value to any classContext 🔦
I'm trying to use MUI to with TypeScript using examples from the website and it's causing TypeErrors as shown in the below image and copied into text.
Expand to show type error when hovering over "typeof styles" squiggle
Your Environment 🌎
`npx @material-ui/envinfo`
The text was updated successfully, but these errors were encountered: