score:1

Accepted answer

when you are passing in icon={<icon2 />} you are actually passing a jsx element, which cannot be styled from the other side with styled-components because it is not a component. to style a component, it needs to take the classname as a prop. in this case, your best bet is to write a styled-component wrapper dev and let the styles cascade to your {props.icon}

but because you are not passing in any props to icon you could easily pass in the component as a prop making it stylable.

<basewidget icon={icon1} />

where you are receiving it:

import styled from "styled-components";

const styledicon = styled.i``;

const basewidget = (props) => {
  const { icon } = props.icon;
  return (
    <styledicon as={icon} />
  );
}

as docs


Related Query

More Query from same tag