Javascript 自定义导入的样式化组件

我有一个

图标

组件，正在导入联系人页面。我希望

图标

组件仅针对该页面具有独特的样式。我也在使用

样式化组件

因此，我认为在导入图标组件后，我会将其扩展如下：

import { Icon } from 'Elements'

const ContactIcon = styled(Icon)`
   // Unique CSS Styles
`

<ContactIcon glyph={Email} screen="Email" />

下面是

组件生成的html：

<span class="Icon__IconLink-hOjoyw ewcGUr"><span class="Icon__ScreenReader-cKVXXE lfVDCI">Email</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg></span>

我还应该补充一点，图标是由

react Icons

提供的。这就是

glyph

道具所指的内容

所以，我想知道——当我使用样式化组件为导入的React图标组件提供独特的样式时，为什么这不起作用

<Icon glyph={Email} screen="Email" />

<span class="Icon__IconLink-hOjoyw ewcGUr"><span class="Icon__ScreenReader-cKVXXE lfVDCI">Email</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg></span>

import React from 'react'
import styled from 'styled-components'


const ScreenReader = styled.span`
  // CSS Styles
`

const IconLink = styled.a`
  // CSS Styles
`
export const Icon = props => (
  <IconLink href={props.goTo} {...props}>
    <ScreenReader>{props.screen}</ScreenReader>
    <props.glyph />
  </IconLink>
)