Стилизованные компоненты и иконки реакции составная часть

Question

Я новичок в стилизованных компонентах и ​​хочу использовать из значков реагирования это мой реагирующий компонент:

<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 ho c, он просто передает className prop вашему компоненту.

IconContext.Provider ожидает только value prop. Это свойство является объектом и может содержать значения 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;
`;