next: 12.0.4
react: 17.0.2

背景

外部のmoduleをinstallしてそこに自分で作ったスタイル当てたい！
今回の例で言うとカレンダーを使いたかったのでreact-calendarをnpm install
用意されてるpropertyでは微妙だったのでスタイルを自分でカスタマイズしたい！

問題

このように外部モジュールを読み込んだ時にcssはグローバルで定義しないと当たらない。（多分）
でも毎回globalなcssに書くのはファイルが大きくなるし、component使わないところに読み込まれるのも違和感がある。

デフォルトであるmodules cssなどはscope化されるのでstyleを当てることができない。
困った。

解決法

styled-jsx使えばファイルには切り出せる。
ちなみにnextにはデフォルトで入ってるのでmoduleのinstallは必要ない

component.jsx

<>
  <Module>...</Module>
  <style jsx global>{`
    .module {
      color: white
      ...
    }
  `}</style>
</>

styled-jsxもscope切られるのでglobalで定義しないと無理です。
他に良い方法があれば知りたい

エラー解消

tsいわくjsxはStyleHTMLAttributesに存在しないとのこと
issueあった。https://github.com/vercel/styled-jsx/issues/90

最終的にはcustom.d.tsを自分で作って定義すれば良い

src/types/custom.d.ts

import 'react';

// styled-jsxの型定義
declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

tsconfig.json

"compilerOptions": {
  // 追加
  "typeRoots": ["node_modules/@types", "./[適当なpath]/types"]
}