きっかけ
とある，ライブラリーのcssを変更したいと思いつつ，様々なことをやったが，いい方法が思いつかなかったので，備忘録として書きます．
状況
今回は，next.jsのapp routerを利用しています．
layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import 'rsuite/dist/rsuite-no-reset.css';
import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file
import React, { ReactNode } from 'react';
import { Toaster } from 'react-hot-toast';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang='en'>
<body className={inter.className}>
{children}
<Toaster />
</body>
</html>
);
}
ここで，Google Chromeから変更したいcssはdefault.cssに入っていることがわかっていました．
解決策
そこで，default.cssの中身をコピーして，新しくcustomDefault.cssを作り，その中身を変えることで対応しました．力技であり，ライブラリーの更新に対応できないという側面もありますが，今回はこれで問題ないので採用しました．
最後に改善後のコードを示します．
layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import 'rsuite/dist/rsuite-no-reset.css';
import 'react-date-range/dist/styles.css'; // main css file
import './customStyle/react-date-range/default.css'; // theme css file
import React, { ReactNode } from 'react';
import { Toaster } from 'react-hot-toast';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang='en'>
<body className={inter.className}>
{children}
<Toaster />
</body>
</html>
);
}