CODEWITHSUNDEEP
javascriptreactjsstyled-components
Joffrey D
Joffrey D

Reputation: 3

How to use Styled Components for a component passed as props

I have 3 components in 3 differents files :

//file1
const Icon1 = styled.div`
width: 10px;
`;
const Widget1 = () => <BaseWidget icon={<Icon1 />} />

//file2  
const Icon2 = styled.div`
width: 15px;
`;
const Widget2 = () => <BaseWidget icon={<Icon2 />} />

//file3
const Icon3 = styled.div`
width: 20px;
`;
const Widget3 = () => <BaseWidget icon={<Icon3 />} />

and my base widget :

//basewidget
const BaseWidget = (props) => <div>{props.icon}</div>

My question is : how can I add style to props.icon in basewidget ? Can I create a styled component based on props.icon and add a common css property ? If it's not possible what is the best solution ?

Thanks, Jef

Upvotes: 0

Views: 156

Answers (1)

Agney
Agney

Reputation: 19204

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

Upvotes: 1

Related Questions