I´m using Webpack 4, Babel 7 and Emotion 10.
I installed @emotion/core @emotion/styled and the recommended plugin babel-plugin-emotion
styled is working properly. I can create a styled component and use it. However, if I try to use the native css`` feature it renders the object but not the styles.
import { css, jsx } from '@emotion/core';
const bold = css`
font-weight: 'bold';
`;
render(
...
<div css={bold}>Something!</div>
...
)
If I inspect the markup I see
Something!If I use className instead of css, is the same. Also if I do it inline or if I use the css() feature.
And If I console.log() that Object the result is:
{
"name": "15b6lyx-bold",
"styles": "font-weight:'bold';label:bold;",
"map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6XFxwcmFjdGljZVxcbm9jcmFcXHNyY1xcQXBwLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCZ0IiLCJmaWxlIjoiQzpcXHByYWN0aWNlXFxub2NyYVxcc3JjXFxBcHAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgeyBjb25uZWN0IH0gZnJvbSAncmVhY3QtcmVkdXgnO1xyXG5cclxuaW1wb3J0IHsgZmV0Y2hDb21tZW50cyB9IGZyb20gJy4vYWN0aW9ucyc7XHJcbmltcG9ydCB7IGNzcywganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuXHJcbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9BcHAuY3NzJztcclxuaW1wb3J0IGNzc0luSnMgZnJvbSAnLi9BcHAuY3NzLmpzJztcclxuXHJcbmltcG9ydCByUEkgZnJvbSAnLi9pbWFnZXMvclBJLTQwMHg0MDAuanBnJztcclxuXHJcbmNvbnN0IENvbW1lbnRzQm94ID0gc3R5bGVkKCdkaXYnKWBcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBsYXZlbmRlcjtcclxuYDtcclxuXHJcbmNvbnN0IGxpc3RJdGVtID0gY3NzYFxyXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XHJcbiAgcGFkZGluZzogMDtcclxuYDtcclxuXHJcbmNvbnN0IGJvbGQgPSBjc3NgXHJcbiAgZm9udC13ZWlnaHQ6ICdib2xkJztcclxuYDtcclxuXHJcbmNsYXNzIEFwcCBleHRlbmRzIENvbXBvbmVudCB7XHJcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XHJcbiAgICB0aGlzLnByb3BzLmZldGNoQ29tbWVudHMoKTtcclxuICB9XHJcblxyXG4gIHJlbmRlckNvbW1lbnRzID0gKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMucHJvcHMuY29tbWVudHMubWFwKGNvbW1lbnQgPT4ge1xyXG4gICAgICByZXR1cm4gPGxpIGtleT17Y29tbWVudC5pZH0+e2NvbW1lbnQubmFtZX08L2xpPjtcclxuICAgIH0pO1xyXG4gIH07XHJcblxyXG4gIHJlbmRlcigpIHtcclxuICAgIHJldHVybiAoXHJcbiAgICAgIDxkaXY+XHJcbiAgICAgICAgPGgxIHN0eWxlPXtjc3NJbkpzLnNlY3Rpb25UaXRsZX0+TGlzdCBvZiBjb21tZW50cyAxMDE8L2gxPlxyXG4gICAgICAgIDxDb21tZW50c0JveD57dGhpcy5yZW5kZXJDb21tZW50cygpfTwvQ29tbWVudHNCb3g+XHJcbiAgICAgICAgPGltZyBzcmM9e3JQSX0gYWx0PVwiUmFzcC4gUGkgTG9nb1wiIGNsYXNzTmFtZT17c3R5bGVzLnJQaX0gLz5cclxuICAgICAgICA8ZGl2IGNzcz17Y29uc29sZS5sb2coYm9sZCl9PlNvbWV0aGluZyE8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICApO1xyXG4gIH1cclxufVxyXG5cclxuY29uc3QgbWFwU3RhdGVUb1Byb3BzID0gKHsgY29tbWVudHMgfSkgPT4ge1xyXG4gIHJldHVybiB7XHJcbiAgICBjb21tZW50c1xyXG4gIH07XHJcbn07XHJcblxyXG5leHBvcnQgZGVmYXVsdCBjb25uZWN0KG1hcFN0YXRlVG9Qcm9wcywgeyBmZXRjaENvbW1lbnRzIH0pKEFwcCk7XHJcbiJdfQ== */"
}
Anyone knows what´s going wrong...? I will appreciate any help. I researched but could not find other person referring to this issue so probably m doing something wrong.
styled is a way to create React components that have styles attached to them. It's available from @emotion/styled. styled was heavily inspired by styled-components and glamorous.
The biggest advantage of Emotion is its easily handled object styles for writing CSS. Take, for example, the case of styled-components, wherein the developer must create unique names for different components, all while avoiding identical naming styles.
Emotion is a library designed for writing css styles with JavaScript.
There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the @emotion/react package. If you're not using React, you should use the @emotion/css package. To use it, import what you need, for example use the css prop to create class names with styles.
You might end up with class="[object Object]"
in div element. If that is all your codes,
you should add JSX pragma /** @jsx jsx */
thing on top before jsx module
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
...
and no single quote at 'bold'
, it is not valid css writing style
https://emotion.sh/docs/css-prop
you should add JSX pragma the top of the module like this:
/** @jsx jsx */
pragma might not work and you should use
/** @jsxImportSource @emotion/react */
instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With