css - Material UI 5 个情感问题

我在我的 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="您已尝试对从“css”函数返回的对象进行字符串化。它不应该直接使用(例如，作为 'className' 属性的值)，而是交给情感，以便它可以处理它(例如，作为 'css' 属性的值)。”

我尝试了带有反引号的 css prop 和 css 函数，但没有一个起作用。

编辑: 将 marginleft 更改为 margin-left (这是从我的元素复制代码时出现的错误)

最佳答案

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

关于css - Material UI 5 个情感问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65707886/