styled-componentsを使っているときのStoryBook v5.2対応

StoryBook v5.2 では、内部でTypeScriptが使われるようになり、型定義を同梱するようになりました。
しかし、内部でemotionを使っているため、その型定義が参照されてしまいます。何が問題なのかというとこの部分です。

emotion.d.ts

declare module 'react' {
  interface DOMAttributes<T> {
    css?: InterpolationWithTheme<any>
  }
}

declare global {
  namespace JSX {
    /**
     * Do we need to modify `LibraryManagedAttributes` too,
     * to make `className` props optional when `css` props is specified?
     */

    interface IntrinsicAttributes {
      css?: InterpolationWithTheme<any>
    }
  }
}

css propを拡張するので、styled-componentsなど他のCSSinJSをプロジェクトで使っている場合に型が競合します。

emotionの型定義を無効化する

そこでemotionの型定義を無効化する必要が出てきます。
tsconfigのpathsを使って、参照を変えましょう。

tsconfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@emotion/core": ["src/types/emotion.d.ts"]
    }

src/types/emotion.d.ts

declare module '@emotion/core';

以上です。これでemotionの型定義が無効化され、今まで通りプロジェクトにあるstyled-componentsなどのCSSinJSの型が適用されます。