Is there a way to automatically change the color of text inside a button component based on the color of the button itself? I'm trying to access the parent element's color in my text component. Here's what I have:
const MyText = (props) => {
const ref = useRef<HTMLElement | null>(null);
useEffect(() => {
const styles = window.getComputedStyle(ref.current).getPropertyValue('color'); //test
}, [ref]);
return <MyTextStyled ref={ref} {...props} />; // styled components
};
const MyPage = () => {
return (
<Button> // my button styled components
<MyText>Button 1</MyText>
</Button>
);
};
How can I extract the button background color to dynamically change the text color? Currently, I only have access to the text styles and not the parent element's styles.