Closed4
emotionとstorybookの相性
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
と書くとこんな感じで叱られる
SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic.
/** @jsxImportSource @emotion/react */ */
というプラグマにする。
または@emotion/babel-preset-css-propを導入して、tsconfig.jsonに以下のことを記述する
{
"presets": ["next/babel", "@emotion/babel-preset-css-prop"]
}
今度はstorybookでスタイルが効かない問題発生
babel-preset-css-prop が storybook 側に反映出来ていないらしい
.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にクローズされました