添加 CSS 以响应创建的元素，如 data-reactroot答案

【问题标题】：Add CSS to react created elements like data-reactroot添加 CSS 以响应创建的元素，如 data-reactroot
【发布时间】：2019-07-16 09:52:44
【问题描述】：

在我的根 div 下 react “自动”创建另一个 div。有没有办法向那个 div 添加一个类？我需要添加 height: 100% 以防止背景内容在显示叠加层时在移动设备中滚动。

这就是我检查网站上的元素时的显示方式。单击按钮时，我需要将 height:100% 添加到 data-reactroot div。但是那个 div 不在我的源代码中。

<div id="root">
    <div data-reactroot data-reactid="1" data-react-checksum="161698...

我可以在容器的 componentDidMount() 中添加这段代码

    let root = document.querySelectorAll('[data-reactroot]')[0];
    if (root) {
        root.style.height = '100%';
    }

但是没有更好的方法吗？这感觉有点 hacky（以一种糟糕的方式）

【问题讨论】：

标签： reactjs

【解决方案1】：

您的 CSS 中的#root > [data-reactroot] { height: 100% } 应该可以工作。

或者只是标签本身：

[data-reactroot] { ... }

【讨论】：

看起来像是从 React 16 there is no more data-reactroot 开始的。为什么不直接设置#root 的样式？如果名称冲突是一个问题，更唯一的 ID 可能会有所帮助。

【解决方案2】：

如果你想使用内联css，只需让你的顶部div位置是绝对的，左、上、右、下为零。因此，如果您检查元素：

<div id="root">
  <div data-reactroot>
    <div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px>
       ....

【讨论】：

【解决方案3】：

使用 id 参考就这么简单

#root{
  /* your css here! */ 
}

【讨论】：