打开阴影DOM CSS样式操作reactJS？

如何解决打开阴影DOM CSS样式操作reactJS？

我正在使用AWS Cognito，并尝试操纵组件的影子DOM。我正在使用react并且我不断收到它无法读取null的属性'shadowRoot'的错误。这与主机值无关。

我有一个signIn组件，这就是我导出并尝试修改DOM的方式：

export default () => {
    var host = document.getElementById("shadow-root"); // i've also tried the name of the component (with getElementByTagName)
    var style = document.createElement( 'style' )
     style.innerHTML = '* { background:red; }'
     host.shadowRoot.appendChild( style )
    
    return(
        <SignIn/>
    )
};

这是错误：

    TypeError: Cannot read property 'shadowRoot' of undefined
push../src/userAuthentication/SignUp.js.__webpack_exports__.default
src/userAuthentication/SignUp.js:194
  191 | var host = document.getElementsByTagName("amplify-authenticator")[0];
  192 | var style = document.createElement( 'style' )
  193 |  style.innerHTML = '* { background:red; }'
> 194 |  host.shadowRoot.appendChild( style )
      | ^  195 | 
  196 | return(
  197 |     <SignIn/>