Каковы более предпочтительные способы добавления условных стилей для стилевых компонентов в React JS?

Question

пример кода (пример кода из Learning React , стр. 146-150);

обратите внимание, что в отличие от книги, написанной два года назад, я пытаюсь реализовать ту же функциональность, используя styled-компоненты. В книге все 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%,
          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

по какой-то причине интерполяция, которую я ожидаю в background-color: ${`this.props.selected ? 'grey' : 'red'`};, не работает, и мое троичное условное выражение появляется в CSS, как я написал его в Javascript.

я что-то упустил? Я думал, что может интерполировать внутри стиля 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%,
          63% 38%,
          100% 38%,
          69% 59%,
          82% 100%,
          50% 75%,
          18% 100%,
          31% 59%,
          0% 38%,
          37% 38%
  );

  .selected {
    background-color: red;
  }

……… но я не смог заставить это работать. (В отличие от SCSS, с которым я знаком, вы не видите, как «вкладывать» свои CSS-объявления в стилизованный блок, нет?)

Пожалуйста, ответьте примерами кода. заранее спасибо!

Answer 1

В стилизованных компонентах функции, передаваемые в интерполяции, вызываются с помощью props. Вы можете деструктурировать props, чтобы получить selected:

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>
)

Answer 2

Цитирование непосредственно из документации по стилевым компонентам:

Интерполяция: Это может быть строка или функция . Строки объединяются с правилами как есть. Функции получат реквизиты стилизованного компонента в качестве первого и единственного аргумента.

Интерполяция вашего компонента должна быть функцией:

const StyledStar = styled.div`
  display: inline;
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: ${props => props.selected ? 'grey' : 'red'};
`

В качестве альтернативы вы можете сделать это намного чище, передавфункция на верхнем уровне:

const StyledStar = styled.div(
  props => `
  /* props can be accessed from the above props */
  color: ${props.color};
  background: ${props.selected ? 'grey' : 'red'};
`
)

демо

РЕДАКТИРОВАТЬ: исправлена ​​опечатка