reactjs - styled-components: style based on non-styled class parent

Question

Let's say I have this:

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>;

How can I style Child so it's "red" when under some-non-styled-class and "blue" when it's under some-other-non-styled-class?

I'm aware of the ability to refer to other styled-components, but I have a use case where I need to change styling based on an existing library with static class names.

question from:https://stackoverflow.com/questions/65910377/styled-components-style-based-on-non-styled-class-parent

Answer 1

You could try something like this then:

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>)
}