web-dev-qa-db-ja.com

感情のCSS機能がスタイルをレンダリングしていません（React）

Webpack 4、Babel 7、Emotion10を使用しています。

@ emotion/core @ emotion/styledと推奨プラグインbabel-plugin-emotionをインストールしました

styledは正しく機能しています。スタイル付きコンポーネントを作成して使用できます。ただし、ネイティブのcss``機能を使用しようとすると、オブジェクトはレンダリングされますが、スタイルはレンダリングされません。

import { css, jsx } from '@emotion/core';

const bold = css`
  font-weight: 'bold';
`;

render(
...
<div css={bold}>Something!</div>
...
)

マークアップを調べると、

Cssの代わりにclassNameを使用しても、同じです。また、インラインで実行する場合、またはcss（）機能を使用する場合も同様です。

そして、そのオブジェクトをconsole.log（）にすると、結果は次のようになります。

{
  "name": "15b6lyx-bold",
  "styles": "font-weight:'bold';label:bold;",
  "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6XFxwcmFjdGljZVxcbm9jcmFcXHNyY1xcQXBwLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCZ0IiLCJmaWxlIjoiQzpcXHByYWN0aWNlXFxub2NyYVxcc3JjXFxBcHAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgeyBjb25uZWN0IH0gZnJvbSAncmVhY3QtcmVkdXgnO1xyXG5cclxuaW1wb3J0IHsgZmV0Y2hDb21tZW50cyB9IGZyb20gJy4vYWN0aW9ucyc7XHJcbmltcG9ydCB7IGNzcywganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuXHJcbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9BcHAuY3NzJztcclxuaW1wb3J0IGNzc0luSnMgZnJvbSAnLi9BcHAuY3NzLmpzJztcclxuXHJcbmltcG9ydCByUEkgZnJvbSAnLi9pbWFnZXMvclBJLTQwMHg0MDAuanBnJztcclxuXHJcbmNvbnN0IENvbW1lbnRzQm94ID0gc3R5bGVkKCdkaXYnKWBcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBsYXZlbmRlcjtcclxuYDtcclxuXHJcbmNvbnN0IGxpc3RJdGVtID0gY3NzYFxyXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XHJcbiAgcGFkZGluZzogMDtcclxuYDtcclxuXHJcbmNvbnN0IGJvbGQgPSBjc3NgXHJcbiAgZm9udC13ZWlnaHQ6ICdib2xkJztcclxuYDtcclxuXHJcbmNsYXNzIEFwcCBleHRlbmRzIENvbXBvbmVudCB7XHJcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XHJcbiAgICB0aGlzLnByb3BzLmZldGNoQ29tbWVudHMoKTtcclxuICB9XHJcblxyXG4gIHJlbmRlckNvbW1lbnRzID0gKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMucHJvcHMuY29tbWVudHMubWFwKGNvbW1lbnQgPT4ge1xyXG4gICAgICByZXR1cm4gPGxpIGtleT17Y29tbWVudC5pZH0+e2NvbW1lbnQubmFtZX08L2xpPjtcclxuICAgIH0pO1xyXG4gIH07XHJcblxyXG4gIHJlbmRlcigpIHtcclxuICAgIHJldHVybiAoXHJcbiAgICAgIDxkaXY+XHJcbiAgICAgICAgPGgxIHN0eWxlPXtjc3NJbkpzLnNlY3Rpb25UaXRsZX0+TGlzdCBvZiBjb21tZW50cyAxMDE8L2gxPlxyXG4gICAgICAgIDxDb21tZW50c0JveD57dGhpcy5yZW5kZXJDb21tZW50cygpfTwvQ29tbWVudHNCb3g+XHJcbiAgICAgICAgPGltZyBzcmM9e3JQSX0gYWx0PVwiUmFzcC4gUGkgTG9nb1wiIGNsYXNzTmFtZT17c3R5bGVzLnJQaX0gLz5cclxuICAgICAgICA8ZGl2IGNzcz17Y29uc29sZS5sb2coYm9sZCl9PlNvbWV0aGluZyE8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICApO1xyXG4gIH1cclxufVxyXG5cclxuY29uc3QgbWFwU3RhdGVUb1Byb3BzID0gKHsgY29tbWVudHMgfSkgPT4ge1xyXG4gIHJldHVybiB7XHJcbiAgICBjb21tZW50c1xyXG4gIH07XHJcbn07XHJcblxyXG5leHBvcnQgZGVmYXVsdCBjb25uZWN0KG1hcFN0YXRlVG9Qcm9wcywgeyBmZXRjaENvbW1lbnRzIH0pKEFwcCk7XHJcbiJdfQ== */"
}

何が悪いのか誰もが知っています...？助けていただければ幸いです。私は調査しましたが、この問題を参照している他の人を見つけることができなかったので、おそらく何か間違ったことをしています。

reactjsemotioncss-in-js
7
Peter

Div要素のclass="[object Object]"で終わる場合があります。それがすべてのコードである場合は、jsxモジュールの前にJSXプラグマ/** @jsx jsx */を追加する必要があります

/** @jsx jsx */
import { css, jsx } from '@emotion/core'

...

'bold'に一重引用符がないため、有効なcssの文体ではありません。

https://emotion.sh/docs/css-prop

8
童Michael