javascript - 自定义导入的样式组件
问题描述
我有一个Icon
要导入联系人页面的组件。我希望该Icon
组件仅针对该页面具有独特的样式。我也在使用Styled-Components
.
因此,我想我会在导入 Icon 组件后扩展它,如下所示:
import { Icon } from 'Elements'
const ContactIcon = styled(Icon)`
// Unique CSS Styles
`
<ContactIcon glyph={Email} screen="Email" />
问题是 Icon 组件没有被注册 - 我们可以看到如果我们看一下获取输出的 html:
<span class="ContactForm__ContactIcon-eDVBAa fAJSOh"></span>
但是,如果我使用原始Icon
组件,那么一切正常。即,这有效:
<Icon glyph={Email} screen="Email" />
这是<Icon>
组件生成的 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>
作为进一步的背景信息,这是Icon
我要导入的原始组件:
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>
)
我还应该补充一点,图标是由react-icons
. 这就是glyph
道具所指的。
所以,我想知道——当我使用 Styled Components 为导入的 React Icon 组件赋予独特的样式时,为什么这不起作用?
解决方案
推荐阅读
- authentication - 如何在 Flutter 中设置“X-IW-SESSION”的属性
- android - 如何在一次点击中设置多个功能
- java - 将大文件从 SD 卡复制到 Android 上的内部存储器
- javascript - 制作基于html的计算器时如何在javascript中显示计算历史
- prolog - Prolog中是否有显示每一步的搜索指针的命令?
- python - Python中R的停止功能等价物是什么
- java - 为什么我会收到“线程“main”中的异常 java.lang.IndexOutOfBoundsException:Index 0 out of bounds for length 0 ”
- java - 为什么不能将整数的 HashSet 或 LinkedList 转换为 int[]?
- javascript - 根据用户类型显示/隐藏选择选项
- javascript - 字符串中最长的重复字符 - Javascript