Typescript doesn't understand 'fontWeigth'

[noahguld]

Current behavior:

Define a style as an object including the key: "fontWeight". Typescript is unable to assign string: 'bold' to type union including "bold". It is, however, able to understand 'font-weight'. All other keys seem to work as expected.

Type '{ 'font-weight': string; fontWeight: string; }' is not assignable to type 'InterpolationWithTheme<any>'.
  Type '{ 'font-weight': string; fontWeight: string; }' is not assignable to type 'ObjectInterpolation<undefined>'.
    Types of property 'fontWeight' are incompatible.
      Type 'string' is not assignable to type 'number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "bold" | "bolder" | "lighter" | FontWeightProperty[] | ("-moz-initial" | ... 7 more ... | "lighter")[] | undefined'.  TS2322

To reproduce:

const styles = {
  base: {
    'font-weight': 'bold',          // works
    fontWeight: 'bold',             // Doesn't work
    backgroundColor: 'red',    // works as expected
  },
};

function Component(): ReactElement {
  return (
    <div css={styles.base}>
      Some Text
    </div>);
}

Expected behavior:

Shouldn't be an error.

Environment information:

react: "^16.13.1"
@emotion/babel-preset-css-prop": "^10.0.27
@emotion/core": "^10.0.35
emotion-theming: "^10.0.27",

[Andarist]

Please check this answer.

[noahguld]

missed that answer, thanks!!