0

I am new to styled-component and I am getting an error stating :

Property 'icon' does not exist on type 'ThemeProps'.

I want to give an icon in props. For one icon it works. I don't know how to do it so that I can change it many times.

export const GenericInput = styled.input`
background-color: #f4f4f4;
width: 220px;
height: 47px;
border: none;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
letter-spacing: 1px;
padding: 15px 30px;
-moz-outline-radius: 50px;    
outline: none;

     ${(Icon) => 
    Icon && css`
        background-image: url(${({ icon }) => icon});
        background-size: 20px;
        background-position: 10px 50%;
        background-repeat: no-repeat;
        color: #c7c7c7;
    `
} 

::placeholder {
    color: #c7c7c7;
}
`;
Karolina W
  • 1
  • Does [this](https://stackoverflow.com/questions/45876313/pass-background-url-as-prop-to-styled-component) solve your problem? – Prateek Thapa Aug 30 '20 at 07:52
  • If I add to GenericInput and move 'background' higher then it works. `export const GenericInput = styled.input` background-image: ${props => `url(${props.background})`}; `;` but i dont know how add in Icon – Karolina W Aug 30 '20 at 13:57
  • It works as it should :) thanks – Karolina W Aug 30 '20 at 14:17

0 Answers0