用样式化的组件修改SVG (react / next)
用样式化的组件修改SVG (react / next)
提问于 2021-05-17 19:15:59
这个问题很具体，我在任何地方都没有发现。
简历：，我怎样才能在样式组件和其他图标中直接修改JSX标准SVG图标的属性？
styled-components Details:我知道使用可以创建图标的“实例”并更改其属性如下：
import IconTest from '@ styled-icons / ionicons-sharp / Apps'
export const SearchIcon = styled (IconTest) `
width: 45px;
height: 45px;
color: # ff0000;
`但是我创建了我自己的SVG图标，将它转换成一个JSX组件，我可以正常使用它，或者使用导入作为组件，也可以使用样式组件。
import {MyIcon} from '../icons'
...
export const MeuIcone = styled (MeuIcone) ``
...
<MyIcon />图标正常呈现。一切都很好！问题是，使用我的图标**，我不能像第一个例子一样，将诸如宽度、高度、颜色等属性直接传递到syled组件**中。只有当我直接传递到组件时，它才能工作，例如：
<MyIcon fill = '# ff0000' />因为我的图标组件我收到了这些道具。因此，实际上问题应该是类似于的“如何使用样式组件将属性传递给组件？”？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-17 20:07:51
通过允许通过属性或直接通过attrs设置组件的样式：
const MyStyledIcon = styled(MyIcon).attrs(props => ({
/* Define a static prop, will be passed as an SVG attribute */
width: 32,
/* Define a dynamic prop, will be passed as an SVG attribute */
height: props.height || 32,
}))`
/* Use a passed prop to define a style */
fill: ${props => props.fill};
/* Use a constant style */
stroke: '#fff';
`;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67575798
复制相关文章
相似问题
腾讯云开发者
