我理解你的问题。我曾经在SVG和CSS的麻烦。最近我已经开发了Chrome扩展与React阴影。Shadowdom是与真实的DOM隔离，所以你不能为这个DOM应用CSS风格一般。我会写我的代码为你。我希望它会有帮助。你需要创建自定义.d.ts文件使用CSS文件作为一个组件。

// custom.d.ts file 

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement>
  >;

  const src: string;
  export default src;
}
declare module '*.css'
declare module '*.scss'

现在你可以导入任何你想要的css文件。

// contentScript.tsx file

import styles from "./assets/css/styles.css";
import HomePanel from "./components/widgets/HomePanel";
const App: React.FC = () => {
    return (
        <>
           <style>{styles}</style>
           <HomePanel />
        </>
    ) 
}
// Render the App component inside the shadow root using createRoot
const sidebarRoot = createRoot(shadowRoot);
sidebarRoot.render(<App />);

最后，需要修改webpack.config.js文件。

// frist install raw-loader library 
npm install --save-dev raw-loader
// insert rule in webpack.config.js
module:{
   rules: [{
       test: /\.css$/,
       use: [{
          loader: 'raw-loader',
          options: {
             esModule: false,
          },
       }],
       include: [
          path.resolve(__dirname, 'src/assets/css'),
          /node_modules/,
       ],
   }]
}

请试着用这个，如果有什么问题，请随时询问。