【React】MUIのstyleが解除されてしまう

Question

前提

MUIを活用してReactでWebサイトを作成中。

実現したいこと

MUIの標準ボタンを使いたい。

発生している問題・エラーメッセージ

サーバーにデプロイし、ページを開く or リロードするとstyleが一瞬適用され、すぐにstyleが解除されてしまう。

Chromeでのみ発生。safariやfirefoxでは発生していない。

該当のソースコード

create-react-appの不要なものを削除したものに、MUIのボタンを入れ込んでいます。
デプロイするサーバーの関係上、package.jsonに『 "homepage": ".",』を追加しています。

//index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

//App.js

import Button from "@mui/material/Button";

function App() {
	return (
		<div className="App">
			<Button variant="text">Text</Button>
			<Button variant="contained">Contained</Button>
			<Button variant="outlined">Outlined</Button>
		</div>
	);
}

export default App;

{
	"name": "test-app",
	"version": "0.1.0",
	"homepage": ".",
	"private": true,
	"dependencies": {
		"@emotion/react": "^11.10.4",
		"@emotion/styled": "^11.10.4",
		"@mui/material": "^5.10.4",
		"@mui/system": "^5.10.4",
		"@testing-library/jest-dom": "^5.16.5",
		"@testing-library/react": "^13.4.0",
		"@testing-library/user-event": "^13.5.0",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"react-scripts": "5.0.1",
		"web-vitals": "^2.1.4"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": [
			"react-app",
			"react-app/jest"
		]
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	}
}

試したこと

原因を切り分けるべく最低限のシステムにしてみた。

Answer 1

Chromeの拡張機能が干渉していました。