[V5] Fix type when assigning SerializedStyles from emotion's css() to `sx` prop

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I noticed that the docs point us to do the following

                <Box
                    sx={{
                        "& div": {
                            color: "hotpink",
                        },
                    }}
                >

This also works when you import { css } from “@emotion/react”

                <Box
                    sx={css`
                        & div {
                            color: hotpink;
                        }
                    `}
                >

Although this works fine and the styling gets applied, there’s a Typescript warning:

(JSX attribute) sx?: SxProps<Theme> | undefined
No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { maxWidth?: ResponsiveStyleValue<MaxWidth<string | number> | (MaxWidth<string | number> | undefined)[] | undefined>; ... 63 more ...; textAlign?: ResponsiveStyleValue<...>; } & ... 4 more ... & Omit<...>): Element', gave the following error.
    Type 'SerializedStyles' is not assignable to type 'SxProps<Theme> | undefined'.
      Type 'SerializedStyles' is not assignable to type 'CSSSelectorObject<Theme>'.
        Index signature is missing in type 'SerializedStyles'.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div">>): Element', gave the following error.
    Type 'SerializedStyles' is not assignable to type 'SxProps<Theme> | undefined'.ts(2769)
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & { component: ElementType<any>; } & { maxWidth?: ResponsiveStyleValue<MaxWidth<string | number> | (MaxWidth<...> | undefined)[] | undefined>; ... 63 more ...; textAlign?: ResponsiveStyleValue<...>; } & ... 4 more ... & Omit<...>'
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & { maxWidth?: ResponsiveStyleValue<MaxWidth<string | number> | (MaxWidth<string | number> | undefined)[] | undefined>; ... 63 more ...; textAlign?: ResponsiveStyleValue<...>; } & ... 4 more ... & Omit<...>'

Maybe we are simply not supposed to do this (despite the fact that it works?). Here are my dependencies:

“@material-ui/core”: “^5.0.0-alpha.35”, “@emotion/react”: “^11.4.0”,

Examples 🌈

N/A

Motivation 🔦

Some might prefer the string interpolation way of doing things rather than the direct JS object way.

[bobbyconnolly]

So I dug a little deeper and it turns out you can just use the css prop. I just had my babel config set incorrectly. Here are the settings in case anyone is interested:

presets

                [
                    "@babel/preset-react",
                    {
                        runtime: "automatic",
                        importSource: "@emotion/react",
                    },
                ],

plugins

                [
                    "@emotion/babel-plugin",
                    {
                        // sourceMap is on by default but source maps are dead code eliminated in production
                        sourceMap: true,
                        autoLabel: "dev-only",
                        labelFormat: "[local]",
                        cssPropOptimization: true,
                    },
                ],

Now this works:

import { css } from "@emotion/react"

...

                <Box
                    css={css`
                        & div {
                            color: hotpink;
                        }
                    `}
                >

I really don’t know how I got into such a twist reading the docs but posting here helped me untangle, so thank you 😃

I guess the only loose end is why the sx prop also seems to work

[claudiusnascimento]

This works for me:

import { SxProps } from ‘@mui/system’; import { Theme } from ‘@mui/material/styles’;

const style: SxProps<Theme> = { position: ‘absolute’, top: ‘50%’, left: ‘50%’, transform: ‘translate(-50%, -50%)’, width: ‘100%’, maxWidth: 900, bgcolor: ‘background.paper’, border: ‘1px solid #a7a7a7’, boxShadow: 24, p: 4, }