Adding styled component to child component is not working-CodePudding

I tried adding the styled component to the child component but the values are not changing at all.

Child component returns

  <a href='' className="displayCarft">{props.craftcolor}</a>

I am using the child component in parent component

   <div classname = 'container'>
      <Child color={props.color}/>
   </div>

i tried adding styled component

 const Styledcomp = styled(Child)`
 .displayCarft{
 color: green !important;
 }
  `

<div classname = 'container'>
      <Styledcomp color={props.color}/>
   </div>

CodePudding user response：

You should pass the className generated by the styled component to the Child component.

const Child = (props) => {
  return (
    <div className={props.className}>
      <a href="" className="displayCarft">
        {props.craftcolor}
      </a>
    </div>
  );
};

CodePudding user response：

As i guess you need two Styledcomp with different styles so try using props. Deeply read here

you can use

const Styledcomp = styled(Child)`
  ${(props) => prop.green && 'color: green}
  /* other styles here */
 `

Use green elements like this: <Styledcomp green />