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

Question

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

but it doesn't work!

Answer 1

When you wrap some component with styled hoc, it just passes className prop to your component.

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