Css 对于React JS中的样式化组件，添加条件样式化的首选方法是什么？

示例代码（Learning React的代码示例，pp 146-150）

请注意，与两年前编写的这本书不同，我尝试使用样式化组件实现相同的功能。在本书中，CSS都是在app.CSS中完成的，星形组件如下所示：

const Star = ({ selected=false, onClick= f=>f }) =>
  <StyledStar className={(selected) ? "selected star" : "star"}
    onClick={onClick}>
  </StyledStar> 

如您所见，如果选择了星星，它将显示为红色而不是灰色

我想使用样式化组件重构它，下面是我尝试过的：

//star.js

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const StyledStar = styled.div`
  display: inline;
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: ${`this.props.selected ? 'grey' : 'red'`};
  clip-path: polygon(
          50% 0%,
          63% 38%,
          100% 38%,
          69% 59%,
          82% 100%,
          50% 75%,
          18% 100%,
          31% 59%,
          0% 38%,
          37% 38%
  );
`

const Star = ({ selected=false, onClick= f=>f }) =>
  <StyledStar className={(selected) ? "selected" : ""}
    onClick={onClick}>
  </StyledStar>

Star.propTypes = {
  selected: PropTypes.bool,
  onClick: PropTypes.func
}

export default Star

---

。。。但我也不能让它发挥作用。（与我熟悉的SCS不同，您无法在样式化块中“嵌套”CSS声明，不是吗？

在样式化组件中，传递给插值的函数使用

道具调用。您可以分解
道具
以选中
：

const StyledStar = styled.div`
  display: inline;
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: ${({ selected }) => selected ? 'grey' : 'red'};
  clip-path: polygon(
          50% 0%,
          63% 38%,
          100% 38%,
          69% 59%,
          82% 100%,
          50% 75%,
          18% 100%,
          31% 59%,
          0% 38%,
          37% 38%
  );
`

用法-以传递
onClick
的相同方式将道具传递给样式化组件：

const Star = ({ selected = false, onClick = f => f }) => (
  <StyledStar
    selected={selected}
    onClick={onClick}>
  </StyledStar>
)

const-Star=（{selected=false，onClick=f=>f}）=>(
)
直接从样式化组件文档中引用：

插值：可以是字符串或函数。字符串按原样与规则组合。函数将接收样式化组件的道具作为第一个也是唯一的参数

组件的插值应该是一个函数：

constyledstar=styled.div`
显示：内联；
光标：指针；
高度：25px；
宽度：25px；
保证金：2倍；
浮动：左；
背景色：${props=>props.selected？'grey'：'red'}；
`

或者，您可以通过在顶层传递函数，使其更干净：

constyledstar=styled.div(
道具=>`
/*可以从上述道具访问道具*/
颜色：${props.color}；
背景：${props.selected？'grey'：'red'}；
`
)


编辑：修复了打字错误
这是一个无状态组件，所以我的星星上有道具吗？
selected
标志以direcltyhmmm的形式传递…插值工作正常，但我所有的星星都是红色（selected）@JasonFB您还需要将
selected
道具传递给您的
StyledStar
。啊，是的，我看到
StyledStar
就像它自己的对象（？）。我让它工作了。事实上，您的答案是完美的，只是红色和灰色颠倒了（选定状态应为红色，非选定状态应为灰色）。当更改为
${（{selected}）=>selected？'red'：'grey'}
时，它会按预期工作。非常感谢。不客气。我已经从您的示例中复制了颜色：）
background color:${props=>props.selected？'grey'：'red'}
按预期工作您的示例
styled.div（props=>
导致语法错误。它没有开头回勾。开头回勾在
之前或之后的哪个位置（
）。我花了很多时间处理（非常混乱且难以理解）样式化组件文档，我从未见过这种语法，因为您提供了两种替代解决方案，请您回答帖子中的问题：“更喜欢的方式是什么…”我在这个生态系统中遇到的一个问题是，似乎有4种方法可以做任何事情，没有人能就何时或为什么使用什么语法达成一致。
const StyledStar=styled.div
（props=>`这种语法导致内联样式的javascript被吐到浏览器上，而没有正确地编译成CSS。我投反对票，因为第二个答案完全是误导性的，会导致“编译失败”消息，我似乎无法通过反复尝试获得语法正确性，而且我没有看到关于创建一个样式化组件并显式将“props”传递到这个伪函数中的内容。据我所知，只有函数方法有效
${props=>props.selected？'red'：'grey'}
…非功能性实现无法工作，我无法让它工作。
${props.selected？'grey'：'red'}；

const StyledStar = styled.div`
  display: inline;
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: ${({ selected }) => selected ? 'grey' : 'red'};
  clip-path: polygon(
          50% 0%,
          63% 38%,
          100% 38%,
          69% 59%,
          82% 100%,
          50% 75%,
          18% 100%,
          31% 59%,
          0% 38%,
          37% 38%
  );
`

const Star = ({ selected = false, onClick = f => f }) => (
  <StyledStar
    selected={selected}
    onClick={onClick}>
  </StyledStar>
)