условная рендеринг в стилизованных компонентах

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

В css я бы сделал это примерно так:

<button className={this.state.active && 'active'} onClick={() => this.setState({active: !this.state.active}) }>Click me</button>

В стильных компонентах, если я пытаюсь использовать '&&' в имени класса, он не нравится.

import React from 'react'
import styled from 'styled-components'

const Tab = styled.button'
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;
'

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      active: false
    }  
    this.handleButton = this.handleButton.bind(this)
}

  handleButton() {
    this.setState({ active: true })
  }

  render() {
     return(
       <div>
         <Tab onClick={this.handleButton}></Tab>
       </div>
     )
  }}

Ответ 1

Вы можете просто сделать это

<Tab active={this.state.active} onClick={this.handleButton}></Tab>

И в ваших стилях что-то вроде этого:

const Tab = styled.button'
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;

  ${({ active }) => active && '
    background: blue;
  '}
';

Ответ 2

Я не заметил ни одного && в вашем примере, но для условного рендеринга в стильных компонентах вы делаете следующее:

// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)'
  background: ${props => props.active ? 'darkred' : 'limegreen'}
'

Ответ 3

Если ваше состояние определено в вашем компоненте класса следующим образом:

class Card extends Component {
  state = {
    toggled: false
  };
  render(){
    return(
      <CardStyles toggled={this.state.toggled}>
        <small>I'm black text</small>
        <p>I will be rendered green</p>
      </CardStyles>
    )
  }
}

Определите ваш стиль-компонент с помощью тернарного оператора на основе этого состояния

const CardStyles = styled.div'
  p {
    color: ${props => (props.toggled ? "red" : "green")};
  }
'

он должен отображать только <p> здесь зеленым.

Это очень нахальный способ укладки