基于React Gatsby博客，如何用Styled Components按href值给a标签加条件样式

正确实现方式 #

你原有代码存在两处错误：

• CSS 属性选择器使用单等号 = 做匹配，不是双等号 ==
• 插值传入的属性值需要用引号包裹，否则 CSS 无法正确解析字符串类型的属性值

动态匹配href值的写法

const Wrapper = styled.div`
  a[href="${props => props.hrefvalue}"] {
    color: #333;
    /* 其他自定义样式 */
  }
`

组件使用时传入对应props即可：

<Wrapper hrefvalue="/asdasdasd">
  {/* 内部href为/asdasdasd的a标签会自动应用上述样式 */}
  <a href="/asdasdasd">目标链接</a>
  <a href="/other">其他链接</a>
</Wrapper>

固定匹配指定href的写法

如果你不需要动态修改匹配的href值，可以直接写死参数，不需要传props：

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

如果需要匹配href开头、结尾包含指定内容的场景，可以直接使用CSS原生属性选择器规则：

• a[href^="xxx"]：匹配href以xxx开头的a标签
• a[href$="xxx"]：匹配href以xxx结尾的a标签
• a[href*="xxx"]：匹配href包含xxx的a标签

内容的提问来源于stack exchange，提问作者홍우지