Styled-components 和 react-icons <IconContext.Provider> 组件

【问题标题】：Styled-components and react-icons <IconContext.Provider> componentStyled-components 和 react-icons <IconContext.Provider> 组件
【发布时间】：2020-11-03 19:56:26
【问题描述】：

我是 styled-components 的新手，我想使用 react 图标中的这是我的 react 组件：

<myComp>
 <AiFillPlusCircle />
</myComp>

这是我的样式化组件代码：

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;
`;

但它不起作用！

【问题讨论】：

标签： javascript reactjs styled-components react-icons

【解决方案1】：

当您使用 styled hoc 包装某些组件时，它只是将 className 属性传递给您的组件。

IconContext.Provider 只需要 value 属性。这个道具是对象，可以containstyle、attr 或className 值。你可以通过 style 属性来配置它：

const MyProvider = ({children}) => <IconContext.Provider value={{ style: { someStyle: someValue } }}>{children}</IconContext.Provider>;

但是，如果您想使用样式组件，可以这样：

const MyProvider = ({className, children}) => <IconContext.Provider value={{className}}>{children}</IconContext.Provider>;

const MyProviderStyled = styled(MyProvider)`
  some-style: some-value;
`;

【讨论】：