样式组件和反应图标 <IconContext.Provider>成分 [英] Styled-components and react-icons <IconContext.Provider> component
问题描述
我是样式组件的新手,我想使用 <IconContext.Provider>从反应图标这是我的反应组件:
i'm new to styled-components and i want to use <IconContext.Provider> from react icons this is my react component:
<myComp>
<AiFillPlusCircle />
</myComp>
这是我的样式组件代码:
and this is my styled components code:
import { IconContext } from 'react-icons';
export const myComp= styled(IconContext.Provider)`
color: rgb(71, 71, 71) !important;
vertical-align: middle !important;
font-size: 1.7rem !important;
`;
但它不起作用!
推荐答案
当您使用 styled
hoc 包装某个组件时,它只会将 className
属性传递给您的组件.
When you wrap some component with styled
hoc, it just passes className
prop to your component.
IconContext.Provider
只需要 value
道具.这个道具是对象,可以包含 style
,attr
或 className
值.你可以只传递 style
属性来配置它:
IconContext.Provider
expects only value
prop. This prop is object and can contain style
, attr
or className
values. You can just pass style
attribute to configure it like this:
const MyProvider = ({children}) => <IconContext.Provider value={{ style: { someStyle: someValue } }}>{children}</IconContext.Provider>;
但是,如果您想使用样式化组件,可能是这样的:
However, if you would like to use styled-components, it could be possible like this:
const MyProvider = ({className, children}) => <IconContext.Provider value={{className}}>{children}</IconContext.Provider>;
const MyProviderStyled = styled(MyProvider)`
some-style: some-value;
`;
这篇关于样式组件和反应图标 <IconContext.Provider>成分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!