Reactjs样式化的组件：创建一个具有内容褪色的“读取/显示更多/更少”链接

Question

我正在尝试使用React中的样式组件来创建类似于Omar Jesus Bravo的CSS Only: Show More w/ Fade的东西。 我被困在CSS：target选择器和样式组件中的CSS通用同级选择器（〜）中。如您所见，我还使用了过渡和线性梯度CSS属性。

这是我尝试的代码：

render() {

    return (
        <Container>
          <div>
             <SeeMoreLink href="#show">See More</SeeMoreLink>
             <SeeLessLink href="#hide">See Less</SeeLessLink>
             <ShowHidePanel>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
             </ShowHidePanel>
             <ShowHideFade></ShowHideFade>
          <div>
        </Container>
    );
}

const SeeMoreLink = styled.a`
    position: absolute;
    bottom: -1em;
    z-index: 100;
    text-align: center;

    color: #fff;
    background: #000;
    border-radius: 1.5em;
    left: 30%;
    padding: 1em;
    text-decoration: none;
    width: 40%;

    &:target ~ ${SeeLessLink} {
        display: block;
    }

    &:target ~ ${ShowHidePanel} {
        max-height: 2000px;
    }
    &:target ~ ${ShowHideFade} {
        margin-top: 0;
    }
`;

const SeeLessLink = styled.a`
    position: absolute;
    bottom: -1em;
    z-index: 100;
    text-align: center;

    color: #fff;
    background: #000;
    border-radius: 1.5em;
    left: 30%;
    padding: 1em;
    text-decoration: none;
    width: 40%;

    display: none;
`;

const ShowHidePanel = styled.div`
    position: relative;
    margin: 2em auto;
    width: 70%;
    max-height: 100px;
    overflow: hidden;
    transition: max-height .3s ease;
`;
const ShowHideFade = styled.div`
    background: linear-gradient(to bottom, rgba($bg-color,0) 0%,rgba($bg-color,1) 75%);
    height: 100px;
    margin-top: -100px;
    position: relative;
`;

请帮助。