如何使用类名对 React 样式化组件进行样式化

Question

如何根据 class 名称为带样式的组件设置样式。我通过一些博客找到了以下实现，但这不起作用。有人可以帮我弄这个吗？非常感谢您提供的任何帮助。

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

Answer 1

访问子项或选择器时，您不必使用 space。下面是一个例子：

const Star = styled.div`
  font-size: 2rem;
  &.filled {
    color: red;
  }
`;

Styled Components Documentation

如何使用类名对 React 样式化组件进行样式化

How to style react styled components using classNames

css

reactjs

styled-components