'How to style react styled components using classNames

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;
`
;
cssreactjsstyled-components


Solution 1:[1]

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;
  }
`;

Styled Components Documentation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions