Material-ui: textTransform does not work with makeStyles and a theme

[kg-currenxie]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

textTransform should work in typescript with makeStyles and theme

Current Behavior 😯

Argument of type '(theme: any) => { root: { height: string; color: string; textTransform: string; background: any; }; }' is not assignable to parameter of type 'Styles<any, {}, "root">'.
  Type '(theme: any) => { root: { height: string; color: string; textTransform: string; background: any; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root">'.
    Type '{ root: { height: string; color: string; textTransform: string; background: any; }; }' is not assignable to type 'Record<"root", CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>'.
      Types of property 'root' are incompatible.
        Type '{ height: string; color: string; textTransform: string; background: any; }' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
          Type '{ height: string; color: string; textTransform: string; background: any; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'textTransform' are incompatible.
              Type 'string' is not assignable to type '"uppercase" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | ((props: {}) => "uppercase" | ... 10 more ... | undefined) | undefined'.ts(2345)

Steps to Reproduce 🕹

https://codesandbox.io/s/typescript-react-material-ui-xe0ub

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.1 |
| React | 16.8.6 |
| TypeScript | 3.5.2 |

[oliviertassinari]

@kg-currenxie Why not following our examples? Does it work?

import {
  createMuiTheme,
  MuiThemeProvider,
  makeStyles,
  Theme,
  createStyles
} from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      height: "100vh",
      color: "#fff",
      textTransform: "uppercase",
      background: theme.palette.primary.main
    }
  })
);

[merceyz]

codesandbox uses [email protected], opening your example in VSCode using [email protected] works fine.
You need [email protected] or higher for your example to work without using createStyles

[kg-currenxie]

Hm, our actual project actually uses ts 3.5.2.
It actually compiles fine, but our IDEs still display it as a warning 🤔

[reggi]

I'm having this issue as well.

https://stackoverflow.com/questions/57335191/texttransform-issue-with-material-ui-typescript-makestyles-createstyles

[meebix]

Also having issues with latest TS version.

[jimmybrawn]

Same here

[merceyz]

@meebix @jimmybrawn Please provide a reproducible example

[el1f]

I also happened across this issue.
https://codesandbox.io/s/eloquent-liskov-ycy5s

Here's an example of it taking place

[onlydel]

I also have a similar issue.
Example in codesandbox is...
https://codesandbox.io/s/mui-theme-overrides-not-work-jwnxt

In case of "case1" in overrides.tsx file, the following error occurs:

(property) MuiButton?: Partial<Record<ButtonClassKey, CSSProperties>> | undefined
Type '{ label: { textTransform: string; }; contained: { boxShadow: string; "&:active": { boxShadow: string; }; }; }' is not assignable to type 'Partial<Record<ButtonClassKey, CSSProperties>>'.
  Types of property 'label' are incompatible.
    Type '{ textTransform: string; }' is not assignable to type 'CSSProperties'.
      Types of property 'textTransform' are incompatible.
        Type 'string' is not assignable to type '"none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase" | undefined'.ts(2322)

overrides.d.ts(102, 3): The expected type comes from property 'MuiButton' which is declared here on type 'Overrides'

In case of "Case2", removing the textTransform property does not cause an error.

[merceyz]

@onlydel @el1f Your issue is described here https://material-ui.com/guides/typescript/#using-createstyles-to-defeat-type-widening

[sondrewb]

This is still an isssue with the newest versions of material-ui and Typescript. I believe this issue should not be closed.

[oliviertassinari]

@sondrewb Do you have a minimal live reproduction with v5-apha?