如何在ReactDOM.createRoot()中动态为根元素添加className及Id？

当然可以实现，有两种简单的方式：

方法一：直接修改HTML中的根节点 #

找到项目中包含<div id="root"></div>的HTML文件，直接给这个元素添加class属性即可：

<div id="root" class="your-custom-class"></div>

这种方式最直接，不需要改动React代码。

方法二：在React代码中动态添加 #

如果需要在JS逻辑里控制className的添加，可以先获取根DOM元素，再通过DOM API添加类：

const rootElement = document.getElementById('root');
// 安全添加自定义类（不会覆盖已有类）
rootElement.classList.add('your-custom-class');

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

如果需要替换所有类而不是追加，可以使用rootElement.className = 'your-custom-class'，但要谨慎使用，避免移除其他依赖的类。

内容的提问来源于stack exchange，提问作者Majedur