React Router v7にリセットCSSを適用する

経緯

• Viteで構築したReactのプロジェクトに React Router v7 を導入して遊んでた
• サイドバー作りたいなと思ってサイドバーとメインコンテンツを分けるフレームコンポーネントを作成
• mui使ってて、横並びにする設定してるのにサイドバーとメインコンテンツが横並びにならない
• DevToolsで要素を確認してみるとbodyタグに display: flex がついてるのが原因っぽい
• これはそもそもViteで生成されたデフォルトの index.css に設定されている

リセットCSSを使う

React Router v7では index.html も不要になるんですがこの際だから index.css も削除してリセットCSSを当てようと思って normalize.css を使うことにしました。

entry.client.tsx

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { HydratedRouter } from "react-router/dom";
import "normalize.css"; // ここをindex.cssにしたままだった！

ReactDOM.hydrateRoot(
	document,
	<StrictMode>
		<HydratedRouter />
	</StrictMode>,
);

root.tsx

export const Layout = ({
	children,
}: {
	children: React.ReactNode;
}) => {
	return (
         // ~~ 略 ~~
    );
}
export default function Root() {
	return (
		<Frame>
			<Outlet />
		</Frame>
	);
}

以上、小ネタでした。

余談

実は割と詰まった内容で、そもそも何でbodyにflexがついてるんだと悩んでました。
そんな設定した心当たりもないしそんなファイルあったっけ？っていう。
index.css ファイルをデフォルト設定のまま使っていたのと、entity.client.tsx というreact router v7移行への最初の環境構築段階で少し触った程度のファイルなのでここに設定をしてるというのが抜けてて思わぬ落とし穴にハマりました。
どこかには必ず設定されているわけなので、原因を突き止めて設定元をしっかり辿るのが大事ですね。