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 prop with backtick 和 css 功能，但 none 正在工作。

编辑：将 marginleft 更改为 margin-left（这是从我的项目复制代码时的错误）

Answer 1

我通过在导入

顶部添加 /** @jsxImportSource @emotion/react */ 解决了这个问题

Material UI 5个情绪问题

Material UI 5 problems with emotion

css

emotion

reactjs

material-ui