web-dev-qa-db-fra.com

rendu conditionnel dans les composants stylés

Comment utiliser le rendu conditionnel dans les composants stylisés pour définir ma classe de boutons sur active à l'aide de composants stylés dans React?

En css je le ferais de la même façon:

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

Dans les composants stylés, si j'essaie d'utiliser '&&' dans le nom de la classe, cela ne lui plaît pas.

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>
     )
  }}
reactjsstyled-components
28
tom harrison

Vous pouvez simplement faire ceci

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

Et dans vos styles, quelque chose comme ça:

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;
  `}
`;
62
João Cunha

Je n'ai remarqué aucun && dans votre exemple, mais pour le rendu conditionnel dans les composants stylés, procédez comme suit:

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

Dans le cas ci-dessus, l'arrière-plan sera assombri lorsque StyledYourComponent est rendu avec les propriétés actives et limegreen si aucun accessoire actif n'est fourni ou s'il est faussé. Styled-components génère automatiquement des noms de classe :)

Si vous souhaitez ajouter plusieurs propriétés de style, vous devez utiliser la balise css, importée à partir de styled-components:

Je n'ai remarqué aucun && dans votre exemple, mais pour le rendu conditionnel dans les composants stylés, procédez comme suit:

import styled, { css } from 'styled-components'
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
  ${props => props.active && css`
     background: darkred; 
     border: 1px solid limegreen;`
  }
`

OU vous pouvez également utiliser object pour passer style, mais gardez à l'esprit que les propriétés CSS doivent être camelCased:

import styled from 'styled-components'
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
  ${props => props.active && ({
     background: 'darkred',
     border: '1px solid limegreen',
     borderRadius: '25px'
  })
`
14
asn007

Si votre état est défini dans votre composant de classe comme ceci:

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

Définissez votre composant stylé à l'aide d'un opérateur ternaire basé sur cet état

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

il devrait rendre juste le <p> tag ici en vert.

C'est un style très sass

1
Vincent Tang