Chakra UI の Reset CSS の影響範囲を限定する

Chakra UI の Reset CSS

Chakra UI を使う際、プロジェクト全体を以下のように ChakraProvider で囲む必要があります。

import { ChakraProvider } from '@chakra-ui/react';
import MyChakraApp from './MyChakraApp';

export default function ProjectRoot() {
  return (
    <ChakraProvider>
      <NyChakraApp />
    </ChakraProvider>
  );
}

この ChakraProvier は、ブラウザのデフォルトCSSを打ち消す機能（Reset CSS）を持ちます。Chakra UI のセットアップの一環として Reset CSS を適用することで、どの環境でも同じUIを提供する目的と思われます。Chakra UI を使う場合、ページ全体にChakra UIを適用する場面が多いと思われるため、基本的にはこの Reset CSS はそのままで問題ないでしょう。

ただ、ページ内で部分的に Chakra UI を適用したいシチュエーションにおいて、Reset CSS が画面全体に効いてしまうと嬉しくありません。デフォルトでは ChakraProvider の中のみならず、ページ全体に Reset CSS が効きます。そのような場面の対処法を記載します。

画面の一部にChakra UIを適用する

ChakraProvier のプロパティに resetScope というプロパティがあるのでこれを利用します。これは Reset CSS の範囲を CSS にて指定するというやりたいことそのままのプロパティです。

import { ChakraProvider } from '@chakra-ui/react';
import MyChakraApp from './MyChakraApp';
import MyApp from './MyApp';

export default function ProjectRoot() {
  return (
    <>
      <ChakraProvider resetScope=":where(#my-css-reset-scope)">
        <div id="my-css-reset-scope">
          <MyChakraApp />
        </div>
      </ChakraProvider>/
      <MyApp />
    </>
  );
}

これで Reset CSS のスコープが id="my-css-reset-scope" を持つタグ内に限定されるため、<MyApp /> は Reset CSS の影響を受けません。疑似クラス :where() を当てないと Reset CSS の優先順位が正しく適用されず、うまくいかない点に注意してください。

ChakraProvier以下の一部をReset CSSの影響下から除外する

基本的にはChakra UIを使いたいけれど、一部パーツには Chakra UI を使いたくない、という場合です。筆者が試した限りでは、上記方法ではこのような場合には対応できないようです。

この場合の解決策の1つとして、Shadow DOM を使って一部コンポーネントをReset CSSの影響から外す方法があります。React Shadow ライブラリを用いることで、特定の領域に対して簡単にShadow DOMを適用することができます。

import { ChakraProvider } from '@chakra-ui/react';
import ReactShadowRoot from "react-shadow";
import MyChakraApp from './MyChakraApp';
import SomeChakraApp from './SomeChakraApp'
import NonChakraApp from './NonChakraApp'

export default function ProjectRoot() {
  return (
    <>
      <ChakraProvider>
        <MyChakraApp />
      </ChakraProvider>
    </>
  );
}

function MyChakraApp() {
  return (
    <>
      <SomeChakraApp />
      <ReactShadowRoot.div>
        <NonChakraApp />
      </ReactShadowRoot.div>
    </>
  );
}

上記の例で言うと <NonChakraApp /> コンポーネント以下は Reset CSS の影響を受けなくなるため、この下で独自のスタイリングを行うことが可能です。