This particular query seems to have been posed and resolved in various ways, but the solutions I've come across either do not pertain to Emotion or the responses related to Emotion haven't yielded results for me. I am currently using @emtion/[email protected] and @emtion/[email protected].
In essence, my goal is to apply styles to a child component when the parent is hovered, active, or focused. The parent element is a button and the child element is an optional icon. The specified styles are assigned to the (parent) button through the styled syntax.
const iconWrapperStyles = (props) => {
return css`
${props.IconWrapper} {
width: ${iconSizeMedium};
height: ${iconSizeMedium};
margin-left: ${spacingSizeSmall};
color: ${textColor};
fill: ${textColor};
background: ${backgroundColor};
border-color: ${borderColor};
}
&:hover:not(:disabled),
&:focus:not(:disabled),
&:active:not(:disabled) ${props.IconWrapper} {
outline: none;
color: ${textColorHover};
fill: ${textColorHover};
background: ${backgroundColorHover};
border-color: ${borderColorHover};
}
`;
};
The initial set of styles is effectively applied. Initially, both the button and the child icon exhibit the correct styling. However, upon hovering/focusing/activating the button, the icon fails to change its appearance. I have attempted the aforementioned implementation, as well as ... + ${IconWrapper} and ... & ${IconWrapper}; unfortunately, all three methods have proven unsuccessful for me. The official documentation suggests that the & should work.