在子级中覆盖样式化的组件父div属性

Question

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

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

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

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

问题：我必须覆盖子组件中的父div属性（padding）。我无法extend覆盖子项中的父项div，因为父项有许多不应应用于子项的属性。我需要在子组件中强制使用padding: 0px。

尝试过：我尝试了以下操作，但由于它是新的div，因此无法正常工作。

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

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

是否有一种方法可以将父属性覆盖到子styled组件中而无需将父div扩展到子组件中？

Answer 1

您不能从孩子那里定位父母class，相反，您应该从父母身上进行定位。

在此示例中，在不覆盖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>
  );
};