样式组件和反应图标 <IconContext.Provider>成分 [英] Styled-components and react-icons &lt;IconContext.Provider&gt; 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屋！