Search code examples
cssreactjsmaterial-uiemotion

Material UI 5 problems with emotion

I migrated from Material UI 4 to 5 Beta in my react app. From the documentation (docs style library) I can see that now I can use emotion, but when I use it I receive a message in the css attribute of the element where I use it.

My code:

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>
)

If i inspect HTML, inside thebutton that is rendered i can see the attribute css like this 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)."

I tried css prop with backtick and css function but none is working.

EDIT: Changed marginleft into margin-left (this was an error while copiyng the code form my project)

Solution

  • I solved this ussues by adding /** @jsxImportSource @emotion/react */ in top of my import