Closed4

emotionとstorybookの相性

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

と書くとこんな感じで叱られる

SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic.
tomoyanakamuratomoyanakamura
/** @jsxImportSource @emotion/react */  */

というプラグマにする。

または@emotion/babel-preset-css-propを導入して、tsconfig.jsonに以下のことを記述する

{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
}
tomoyanakamuratomoyanakamura

今度はstorybookでスタイルが効かない問題発生

babel-preset-css-prop が storybook 側に反映出来ていないらしい

tomoyanakamuratomoyanakamura

.storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [
        ['react-app', { flow: false, typescript: true }],
        // css prop を使えるように,追加
        require.resolve('@emotion/babel-preset-css-prop'),
      ],
    },
  });

こいつを追加しても解決できず

参考

このスクラップは2022/01/27にクローズされました