Search code examples
cssreactjsstyled-components

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

  • 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