示例代码（ Learning React 中的代码示例，第146-150页）；

请注意，与两年前写的书不同，我正在尝试使用样式化组件实现相同的功能。在本书中，CSS全部在app.css内部完成，而Star组件看起来像这样：

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

和app.css看起来像这样：

.star {
  display: inline;
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: grey;
  clip-path: polygon(
          50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%
      );
}



.star.selected {
  background-color: red;
}

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

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

// 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%,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

由于某种原因，我在background-color: ${`this.props.selected ? 'grey' : 'red'`};中期望的插值无法正常工作，而我的三元条件在我用JavaScript编写时在CSS中出现。

我想念什么吗？我以为可以像这样在样式div内插，但我想不是吗？

我也尝试过

const StyledStar = styled.div`
  display: inline;
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: grey;
  clip-path: polygon(
          50% 0%,37% 38%
  );

  .selected {
    background-color: red;
  }

...但是我也无法正常工作。 （与我熟悉的SCSS不同，您看不到将CSS声明嵌套在样式块内，对吗？）