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

Question

我是样式组件的新手，我想使用 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;
`;

但是没用！

Answer 1

当你用 styled hoc 包装一些组件时，它只是将 className prop 传递给你的组件。

IconContext.Provider 只需要 value 道具。此道具是对象，可以 contain style、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;
`;

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

Styled-components and react-icons <IconContext.Provider> component

javascript

reactjs

styled-components

react-icons