javascript - 样式化组件和反应图标零件

Question

我是 styled-components 的新手，我想从反应图标中使用 <IconContext.Provider> 这是我的反应组件：

<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

当您使用styledhoc 包装某些组件时，它只是将classNameprop 传递给您的组件。

IconContext.Provider只需要value道具。这个道具是对象，可以包含 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;
`;