reactjs - 添加 CSS 来响应创建的元素，例如 data-reactroot

Question

在我的根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%';
    }

但是有没有更好的方法呢？这感觉有点像黑客(以一种糟糕的方式)

Answer 1

CSS 中的

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

或者只是标签本身:

[data-reactroot] { ... }