styled-components：基于非样式类父的样式

Question

假设我有这个：

const Child = styled.button`
    background-color: grey;
`;

<div className="some-non-styled-class">
    <Child>Hello World</Child>
</div>;

<div className="some-other-non-styled-class">
    <Child>Hello World</Child>
</div>;

如何设置 Child 的样式，使其在 some-non-styled-class 下为“红色”，在 some-other-non-styled-class 下为“蓝色”？

我知道ability to refer to other styled-components，但我有一个用例，我需要根据具有静态类名的现有库更改样式。

Answer 1

你可以试试这样的：

export const Child = () => {
const [parentClass, setParentClass] = useState("")

useEffect(() => {
  const currentClass = document.querySelector(".childComp").parentElement.className
  setParentClass(currentClass)
},[])

return (<MyStyledComponent className="childComp" parentClassName={parentClass}>
  {children}
  </MyStyledComponent>)
}