Approach 1: Create a style element manually

import React from 'react';
import { createRoot } from 'react-dom/client';
import Content from './Content';
import styles from '@assets/styles/index.css?inline'; // Use the ?inline query to get CSS as string

const container = document.createElement('div');
const shadowRoot = container.attachShadow({ mode: 'open' });

// Create a style element manually
const styleElement = document.createElement('style');
styleElement.textContent = styles;
shadowRoot.appendChild(styleElement);

document.body.appendChild(container);

const root = createRoot(shadowRoot);
root.render(<Content />);

Approach 2: Use constructable stylesheets (more modern)

import React from 'react';
import { createRoot } from 'react-dom/client';
import Content from './Content';
import styles from '@assets/styles/index.css?inline';

const container = document.createElement('div');
const shadowRoot = container.attachShadow({ mode: 'open' });

// Create a constructable stylesheet
const sheet = new CSSStyleSheet();
sheet.replaceSync(styles);
shadowRoot.adoptedStyleSheets = [sheet];

document.body.appendChild(container);

const root = createRoot(shadowRoot);
root.render(<Content />);

reference: https://github.com/rezasohrabi/chrome-ext-starter/tree/main