styled-components example referring to other component
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Icon = styled.svg`
flex: none;
transition: fill 0.25s;
width: 48px;
height: 48px;
${Link}:hover & {
fill: rebeccapurple;
}
`;
const Label = styled.span`
display: flex;
align-items: center;
line-height: 1.2;
&::before {
content: '◀';
margin: 0 10px;
}
`;
render(
<Link href="#">
<Icon viewBox="0 0 20 20">
<path d="M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z"/>
</Icon>
<Label>Hovering my parent changes my style!</Label>
</Link>
);const Link = styled.a` display: flex; align-items: center; padding: 5px 10px; background: papayawhip; color: palevioletred;`;
const Icon = styled.svg` flex: none; transition: fill 0.25s; width: 48px; height: 48px;
${Link}:hover & { fill: rebeccapurple; }`;
const Label = styled.span` display: flex; align-items: center; line-height: 1.2;
&::before { content: '◀'; margin: 0 10px; }`;
render( <Link href="#"> <Icon viewBox="0 0 20 20"> <path d="M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z"/> </Icon> <Label>Hovering my parent changes my style!</Label> </Link>);
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
Hovering my parent changes my style!