Material UI 5: проблемы с эмоциями

Я перешел с Material UI 4 на 5 Beta в моем приложении для реагирования. Из документации (библиотека стилей документов) я вижу что теперь я могу использовать эмоции, но когда я использую их, я получаю сообщение в атрибуте 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 с обратной кавычкой и функцией css, но ничего не работает.

РЕДАКТИРОВАТЬ: изменено marginleft на margin-left (это была ошибка при копировании кода из моего проекта)


reactjs material-ui css emotion
person zOwN    schedule 13.01.2021    source источник
comment
Разве свойство CSS не должно быть margin-left вместо marginleft?   -  person rateLess    schedule 13.01.2021
comment
Да, свойство было margin-left, но я удалил - for ошибки во время вставки кода. Тем не менее, я нашел решение, я опубликую его.   -  person zOwN    schedule 13.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Я решил эту проблему, добавив /** @jsxImportSource @emotion/react */ в начало моего импорта

person zOwN    schedule 13.01.2021