Typescript fontWeight too restrictive

Current the typing for fontWeight (used with createStyles) doesn’t allow other weights like “black” or “extra-bold”.

Current typing:

StandardLonghandProperties<TLength = string | 0>.fontWeight?: number | "bolder" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "bold" | "lighter" | undefined

Recommended: Make the weight a general string instead of an enum.

Example:

const styles = createStyles({
  root: {
    flexGrow: 1,
  },
  flex: {
    flexGrow: 1,
    fontFamily: 'Montserrat!important',
    fontWeight: 'black'
  }
});

The above code causes the TS error:

[ts] Argument of type ‘{ root: { flexGrow: number; }; flex: { flexGrow: number; fontFamily: string; fontWeight: “black”; }; menuButton: { marginLeft: number; marginRight: number; }; }’ is not assignable to parameter of type ‘Record<“root” | “flex” | “menuButton”, CSSProperties>’. Types of property ‘flex’ are incompatible. Type ‘{ flexGrow: number; fontFamily: string; fontWeight: “black”; }’ is not assignable to type ‘CSSProperties’. Types of property ‘fontWeight’ are incompatible. Type ‘“black”’ is not assignable to type 'number | “-moz-initial” | “inherit” | “initial” | “revert” | “unset” | “normal” | “bold” | “bolder” | “lighter” | undefined

[Tony-Esales]

How about fontWeight: “bold !important”? It’s necessary use the !important sometimes…

[oliviertassinari]

@MichaelTrilford-Airwallex We should be good in v5 now with

import { experimentalStyled as styled } from '@material-ui/core/styles';

e.g. open this demo in codesandbox https://next--material-ui.netlify.app/components/checkboxes/#customized-checkbox