css - Material UI 5 情感问题

Question

我在 React 应用程序中从 Material UI 4 迁移到 5 Beta。从文档( docs style library )我可以看到现在我可以使用情绪，但是当我使用它时，我在使用它的元素的 css 属性中收到一条消息。
我的代码 :

import { jsx, css } from '@emotion/react';

//Other code.....

return (
    <IconButton
        css={css`
             margin-left: 10px;
        `}
        //css={css({ marginLeft: 10 })}
        aria-label='show 4 new mails'
        color='inherit'
    >
        <Badge badgeContent={1} color='secondary'>
            <MailIcon />
        </Badge>
    </IconButton>
)

如果我检查 HTML，在呈现的按钮内，我可以看到这样的属性 css css="You have tried to stringify object returned from 'css' function. It isn't supposed to be used directly (e.g. as value of the 'className' prop), but rather handed to emotion so it can handle it (e.g. as value of 'css' prop)."我尝试了带有反引号和 css 函数的 css prop，但没有一个工作正常。
编辑:
将 marginleft 更改为 margin-left (这是从我的元素中复制代码时出现的错误)

Answer 1

我通过添加 /** @jsxImportSource @emotion/react */ 解决了这个问题在我的导入之上