在布局页面上使用样式组件覆盖特定组件的子 div答案

【问题标题】：Override specific component`s child div with styled-components on layout page在布局页面上使用样式组件覆盖特定组件的子 div
【发布时间】：2022-02-16 11:16:40
【问题描述】：

我有布局页面组件，其中所有其他组件 div 都应用了规则 overflow-y: hidden。使用 styled-components 应用规则。

我希望一个特定（名为“过滤器”）组件的子 div 可见。

我尝试过这样的事情：

  > div {
    overflow-y: hidden;
    grid-area: right;
  }

  > ${Filters} {
    cursor: pointer;
    && div {
      overflow-y: visible;
    }
  }

但它不起作用，我在文档中没有看到任何解决方案（或者我是盲人）。任何想法如何定位这些 div 并覆盖溢出-y：隐藏规则？

【问题讨论】：

标签： html css reactjs styled-components

【解决方案1】：

我已经设法在过滤器组件中使用标签“span”而不是“div”暂时绕过了这个问题。不是最优雅的方式，但它确实有效。

【讨论】：

【解决方案2】：

你的代码应该是这样的：

${Filters} {
   cursor: pointer;
   div {
     overflow-y: visible;
   }
}

或在声明Filters div 时，按以下方式进行：

const Filters = styled.div`
    cursor: pointer;
   div {
     overflow-y: visible;
   }
`;

【讨论】：