Zenn
Open2

styled jsx 周りで調べたこと

たつおたつお

Global CSS

既存のコンポーネントに遡てCSSを適用するのは、ローカルスコープではできない？

https://github.com/vercel/styled-jsx#global-styles

export default () => (
  <div>
    <style jsx global>{`
      body {
        background: red
      }
    `}</style>
  </div>
)

import Select from 'react-select'
export default () => (
  <div>
    <Select optionClassName="react-select" />

    <style jsx>{`
      /* "div" will be prefixed, but ".react-select" won't */

      div :global(.react-select) {
        color: red
      }
    `}</style>
  </div>
)

i.e.

たつおたつお

自分用テンプレ

hoge.jsx
const MyComponent = ({flag}: {flag: boolean}): JSX.Element => {
   return (
    <></>
  )
}