Types of property are incompatible

[ghost]

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

import React, { FC } from "react";
import { Theme, WithStyles, withStyles, InputBase } from "@material-ui/core";
import { Magnify } from "mdi-material-ui";

const styles = (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 searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create("width"),
    width: "100%",
  },
});

interface SearchBarProps extends WithStyles<typeof styles> {}

const SearchBar: FC<SearchBarProps> = ({ classes }) => (
  <div className={classes.search}>
    <div className={classes.searchIcon}>
      <Magnify />
    </div>
    <InputBase
      placeholder="Waar ben je naar op zoek?"
      classes={{
        root: classes.inputRoot,
        input: classes.inputInput,
      }}
      inputProps={{ "aria-label": "search" }}
    />
  </div>
);

export default withStyles(styles)(SearchBar);

Steps:

1. Observe TypeError
2. Remove pointerEvents
3. Observe TypeError disappears
4. Add position prop with value to any class
5. 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)

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.3
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 84.0.2
    Safari: 14.1
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3 
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 
    @material-ui/styles: ^4.11.3 => 4.11.3 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: ^17.0.1 => 17.0.1 
    react: ^16.13.0 => 16.13.1 
    react-dom: ^16.13.0 => 16.13.1 
    styled-components: ^5.0.1 => 5.1.1 
    typescript: ^4.1.4 => 4.1.4 

[oliviertassinari]

Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[oliviertassinari]

You need to add createStyles() see the docs: https://material-ui.com/guides/typescript/#usage-of-withstyles

[ghost]

@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).