Fatal编程技术网
  • javascript/
  • Javascript 如何使用已设置样式的组件设置此阴影DOM的样式？

Javascript 如何使用已设置样式的组件设置此阴影DOM的样式？

javascript css reactjs

Javascript 如何使用已设置样式的组件设置此阴影DOM的样式？,javascript,css,reactjs,styled-components,shadow-dom,Javascript,Css,Reactjs,Styled Components,Shadow Dom,我有一个容器组件，它将其他页面元素和web组件嵌套在名为page的样式中，我想在阴影DOM中使用类骨架网格平铺来设置所有组件的样式，但它不起作用 import styled from "styled-components" export const Style = styled.div` ::shadow .skeleton-grid-tile { width: 100px; height: 200px; border: 1px solid re

我有一个容器组件，它将其他页面元素和web组件嵌套在名为
page
的样式中，我想在阴影DOM中使用类
骨架网格平铺来设置所有组件的样式，但它不起作用


import styled from "styled-components"

export const Style = styled.div`
  ::shadow .skeleton-grid-tile {
    width: 100px;
    height: 200px;
    border: 1px solid red;
  }
`


以下是Chrome Devtools中元素的屏幕截图：




请注意，
不是页面的主要父元素，它只是我试图瞄准的
#影子根的父元素。
您确定样式化组件应该与自定义元素一起工作吗？我一直认为它们是专门为React设计的。是的。通常，我们只需在样式化组件中的某个位置添加一些常规CSS选择器，只要选择器嵌套在样式化组件中，就可以很好地应用样式。您确定样式化组件应该与自定义元素一起工作吗？我一直认为它们是专门为React设计的。是的。通常，我们只需在样式化组件中的某个位置添加一些常规CSS选择器，只要选择器嵌套在样式化组件中，就可以很好地应用样式。