I want to use the url I got as props from the styled component - styled-components

Question

import React from "react";
import styled from "styled-components";
const topCate = (props) => {
return (
<TopCateList imgObj>
<p>{props.main_category_id}</p>
</TopCateList>
);
}
const TopCateList = styled.li`
width: 130px;
height: 60px;
border-radius: .3em;
border: 1px solid gray;
padding: .5em 0em;
text-align: center;
font-size: 0.975rem;
background-image: url(${props => props.backImg});
line-height: 3em;
font-weight: 500;
margin-right: .5em;
`;
export default topCate;
I want to use the url I got as props from the styled component.
It is not displayed on the screen.
What should I do?

Answer 1

You can extend a component in styled-components like in the code below :
Any props you pass in this component will be available to you as props like the url,color and backImg. Just make sure to pass the className to the li for it to apply the styles.
import React from "react";
import styled from "styled-components";
const List = (props) => {
return (
<li className={props.className}>
<p>{props.url}</p>
</li>
);
}
const TopCateList = styled(List)`
width: 130px;
height: 60px;
border-radius: .3em;
border: 1px solid gray;
padding: .5em 0em;
text-align: center;
font-size: 0.975rem;
background-image: url(${props => props.backImg});
line-height: 3em;
font-weight: 500;
margin-right: .5em;
color: ${props => props.color};
`;
export default TopCateList;
Usage
<TopCateList url="http://stackoverflow.com" color="red" backImg="./src/someimage.jpg">
Hope this helps !