Reactjs 使用href值设置已设置样式的组件条件样式

我正在用

React

撰写

Gatsby

博客

我想用特定的

href

值和这样的样式化组件来设置标签的样式

将此样式设置为标记 a

href=“/asdasdasd”/

我就是这么想的

const Wrapper = styled.div`
    a[href==${props=>props.hrefvalue}]{         //hrefvalue == /asdasdasd
         color: #333; 
    }
`

我可以应用React，但想知道如何将此功能应用于样式化组件

style.js文件：

const StyledLink = Styled.a`

    color:${props=>props.href === "#" ? "red" :"blue" } !important;
`;

在组件中：

        <StyledLink 
          href="#"
         >
           the red link
        </StyledLink>

        <StyledLink 
          href="/any"
         >
           the blue link
        </StyledLink>

红色链接
蓝色链接

我找到了原因

问题是“”

当我将“”添加到代码中时，它可以完美地工作

 a[href*="${props => props.currentHeader}"] {
    color: red;
  }

---

有没有代码沙盒的例子？