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

Question

根据我的根div反应创建另一个div＆＃34;自动＆＃34;。有没有办法为该div添加一个类？我需要添加高度：100％以防止背景内容在显示叠加层时在移动设备中滚动。

这是我在检查网站上的元素时的显示方式。单击按钮时，我需要将高度：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（以一种糟糕的方式）

Answer 1

你的CSS中的

#root > [data-reactroot] { height: 100% }应该有用。

或者只是标签本身：

[data-reactroot] { ... }

Answer 2

如果你想使用直插式css，只需让你的顶部div位置是绝对的，左，上，右，下是零。 所以如果你检查元素：

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

Answer 3

使用id引用如此简单

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