Styled Components - контент, пропущенный через реквизит (контент)

Question

Я пытаюсь переключать текст внутри div (стилизованный компонент) в зависимости от значения реквизита. Идея проста: состояние изменяется, его значение переходит в подпорки стилизованного компонента, а затем в зависимости от того, что это такое, контент корректируется. Что не работает, так это содержимое до / после. Есть идеи почему?

СТИЛЬНЫЙ КОМПОНЕНТ:

export const Info = styled.div`
  padding: 5px;
  margin-top: 15px;
  &::after {
 content: ${props => props.content === "intro" && "hello"};
  }
`

JS

const CheckNumber = () => {

  const [msg, setMsg] = useState("intro")

  return (

        <Info content={msg}/>
  )
}

export default CheckNumber

Answer 1

Ваш текущий код генерирует стиль

content: hello

, который недопустим CSS. Вам нужны дополнительные кавычки (одна пара для уровня JS и вложенные кавычки для CSS):

  &::after {
     content: ${props => props.content === "intro" && "'hello'"};
  }

PS обнаружил, что действительно случайно, продублировав content вроде:

  &::after {
     content: "aaaa";
     content: ${props => props.content === "intro" && "hello"};
  }

потому что браузер просто не создал псевдоэлемент ":: after", в то время как content недопустим - поэтому мы не смогли проверить, какие стили были фактически сгенерированы.