How to style a styled component based on the class name it has. I found the following implementation through some blogs, but this isn't working. Can someone help me with this? I really appreciate any help you can provide.
import React from "react";
import { TiStarFullOutline } from "react-icons/ti";
import styled from "styled-components";
function StarRating() {
return (
<Star className="filled">
<TiStarFullOutline></TiStarFullOutline>
</Star>
);
}
export default StarRating;
//notworking
const Star = styled.div`
font-size: 2rem;
& .filled {
color: red;
}
`;
//working
const Star = styled.div`
color:red;
`
;
CodePudding user response:
When accessing a child or a selector, you don'thave to use space. Below is an example:
const Star = styled.div`
font-size: 2rem;
&.filled {
color: red;
}
`;