chakra-ui에서 특정 구성 요소를 호출할 때만 글로벌 스타일을 맞히기

emotion을 사용한 Global Styles😙

import { Global } from '@emotion/react'

export const MyComponentWithGlobalStyle = () => {
  return (
    <>
      <Global
        styles={{
          body: {
            overflow: 'hidden',
          },
        }}
      />
      <MyComponent />
    </>
  )
}

덤

import { Global } from '@emotion/react'

export const MyComponentWithGlobalStyle = () => {
  const id = 'myComponent'
  
  return (
    <>
      <Global
        styles={{
          [`#${id}`]: {
            backgroundColor: 'red',
            a: {
              color: 'blue'
            }
          },
        }}
      />
      <MyComponent id={id} />
    </>
  )
}