I am using react rafce function and I want to decorate my color icons ,I decided to create a rounded icons with colors inside but it ended up not showing any colors.

This is my css styling

const FilterColor = styled.div`
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:$props{props=>props.color};
    margin:0px 5px;
    cursor:pointer;
`  

This is my html code

    <FilterTitle>Color: </FilterTitle>
    <FilterColor color= 'red' />
    <FilterColor  color ='darkblue'/>
    <FilterColor color='orange' />

This is my output

This is what it should look

>Solution :

Assuming, you are using styled-components, change your FilterColor component to:

const FilterColor = styled.div`
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: ${(props) => props.color}; // <-- this got changed
  margin: 0px 5px;
  cursor: pointer;
`;