Emotion CSS функция не рендеринга стилей (React)

Я использую Webpack 4, Babel 7 и Emotion 10.

Я установил @emotion/ Core @ Emotion / Styled и рекомендуемый плагин babel-plugin-emotion

Стиль работает правильно. Я могу создать стилизованный компонент и использовать его. Тем не менее, если я пытаюсь использовать встроенную функцию css`, он рендерит объект, но не стили.

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

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

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

Если я проверяю разметку, я вижу

Что-то!

Если я использую className вместо CSS, то же самое. Также, если я делаю это inline или если я использую функцию 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== */"
}

Кто-нибудь знает, что идет не так...? Я буду признателен за любую помощь. Я исследовал, но не смог найти другого человека, имеющего отношение к этой проблеме, поэтому, вероятно, я делаю что-то не так.

Источник

6 ответов

Вы можете закончить с class="[object Object]" в элементе div. Если это весь ваш код, вы должны добавить прагму JSX, просто поставьте /** @jsx jsx */ сверху перед модулем jsx

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

...

и ни одной цитаты в 'bold', это не правильный стиль написания CSS

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

Источник

вы должны добавить прагму JSX в верхнюю часть модуля следующим образом:

      /** @jsx jsx */

прагма может не работать, и вам следует использовать

       /** @jsxImportSource @emotion/react */

вместо.

Источник

Вам нужно убедиться, что у вас есть директива компилятора прагмы JSX, указанная в верхней части вашего файла:

      /** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react'

См. этот учебник для получения дополнительной информации.

Источник

сcreate-react-appс использованием@emotion/react11, React 18 и Typescript 4.4, я поначалу только начиналcss="[object Object]"в ДОМ. ИспользуяjsxImportSourceу меня сработала прагма, но я не хотел добавлять ее в каждый файл, поэтому добавил ее вtsconfig.jsonвместо этого работал на меня:

      // tsconfig.json
"compilerOptions": {
  ...,
  "jsxImportSource": "@emotion/react"
}

Всего за несколько дней я столкнулся с точно такой же проблемой, используя rollup + esbuild (rollup-plugin-esbuild), и это решило это для меня

      esbuild({
  ...
  jsx: 'automatic',
  jsxImportSource: '@emotion/react',
}),
Источник

Различные интерфейсные инструменты предоставляют различные способы преобразования JSX. Иногда вам необходимо предоставить инструменту явный способ обработки JSX. Моя проблема была при использовании Vite. Вы можете добавить собственный плагин в разделе плагинов в вашемvite.config.tsсправиться сjsxImportSourceпроблема:

Добавьте это в качестве первого плагина в массив плагинов:

          {
      name: 'add-emotion-jsx-pragma',
      enforce: 'pre',
      transform(code: string, id: string): TransformResult | null {
        if (/\.[jt]sx?$/.test(id)) {
          return {
            code: `/** @jsxImportSource @emotion/react */\n${code}`,
            map: null,
          };
        }
        return null;
      },
    },

Обратите внимание, как уже упоминалось, вам все равно нужно добавить следующее в свойtsconfig

      // tsconfig.json
"compilerOptions": {
  ...,
  "jsxImportSource": "@emotion/react"
}
Источник

Удалите одинарную кавычку в атрибуте bold

const bold = css`
  font-weight: bold;
`;
Источник
Другие вопросы по тегам