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