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

Question

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

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

我试过这样的事情：

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

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

但是它不起作用，而且我在文档中没有看到解决方案（或者我是盲人）。关于如何定位这些 div 并覆盖 overflow-y: hidden rule 的任何想法？

Answer 1

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

Answer 2

你的代码应该是这样的：

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

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

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

Override specific component`s child div with styled-components on layout page