在React应用程序中，我使用样式的组件处理以下div结构。
<Parent>
<Child>
<Image/>
<Text/>
</Child>
</Parent>
const Parent = styled.div`
...
...
padding = 25px 5px;
`;
const Child = styled.div`
padding: 0px;
`;
问题:我必须重写子组件中的父div属性(padding)。 我无法扩展子级中的父级div以重写，因为父级中有更多不应应用到子级中的属性。 我需要在子组件中强制填充:0px。
尝试过:我尝试了以下操作，但没有工作，因为它是一个新的个人div。
const Child = styled.div`
&& {
padding: 0px;
}
`;
const Child = styled.div`
padding: 0px !important;
`;
有没有一种方法可以将父属性重写到子样式组件中，而不将父div扩展到子组件中？
您不能将父类的目标定位于子类，而是应该从父类本身进行。
在本例中，如果不在parent中重写，子级将具有填充: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>
);
};
