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

IT技术 reactjs
2021-04-25 13:28:46

在我的根 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（以一种糟糕的方式）

3个回答

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

或者只是标签本身：

[data-reactroot] { ... }

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

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

使用 id 引用如此简单

#root{
  /* your css here! */ 
}
其它你可能感兴趣的问题
上一篇我应该为 Anycubic i3 Mega 购买哪种喷嘴？ 下一篇PLA 耐化学性？尤其是盐酸，其他酸