javascript - 覆盖子元素中的样式化组件父 div 属性

Question

在 React 应用程序中，我使用组件处理以下div结构。styled

<Parent>
  <Child>
    <Image/>
    <Text/>
  </Child>
</Parent>

const Parent = styled.div`
 ...
 ...
 padding = 25px 5px;
`;

const Child = styled.div`
  padding: 0px;
`; 

问题：我必须覆盖padding子组件中的父 div 属性 ()。我不能extend覆盖子级中的父级 div，因为父级有更多不应该应用于子级的属性。我需要强制padding: 0px子组件。

试过：我尝试了以下但没有工作，因为它是一个新人div。

 const Child = styled.div`
   && {
        padding: 0px;
   }
`; 

   const Child = styled.div`
     padding: 0px !important;
`; 

有没有办法在styled不将父 div 扩展到子组件的情况下将父属性覆盖到子组件中？

标签： javascriptcssreactjsstyled-components

Answer 1

您不能class从孩子定位父母，而是应该从父母本身进行。

在此示例中，如果不覆盖 in Parent，则孩子将拥有padding: 10px并且将显示绿色背景。

const Child = styled.div`
  background-color: palegreen;
  padding: 10px;
`;

const Parent = styled.div`
  background-color: palevioletred;
  padding: 1rem;
  ${Child} {
    padding: 0px;
  }
`;

const App = () => {
  return (
    <Parent>
      <Child />
    </Parent>
  );
};