¿Cómo puedo usar la representación condicional en componentes con estilo para configurar mi clase de botón como activa usando componentes con estilo en React?
En css lo haría de manera similar a esto:
<button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>En los componentes con estilo, si trato de usar '&&' en el nombre de la clase, no le gusta.
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> ) }}Simplemente puedes hacer esto
<Tab active={this.state.active} onClick={this.handleButton}></Tab>Y en tus estilos algo como esto:
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; `} `;No noté ningún && en su ejemplo, pero para la representación condicional en componentes con estilo, haga lo siguiente:
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc const StyledYourComponent = styled(YourComponent)` background: ${props => props.active ? 'darkred' : 'limegreen'} `En el caso anterior, el fondo será de color rojo oscuro cuando StyledYourComponent se represente con el accesorio activo y verde lima si no se proporciona ningún accesorio activo o si es falso. Styled-components genera nombres de clase para usted automáticamente :)
Si desea agregar varias propiedades de estilo, debe usar la etiqueta css, que se importa de los componentes con estilo:
No noté ningún && en su ejemplo, pero para la representación condicional en componentes con estilo, haga lo siguiente:
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;` } `O también puede usar el objeto para pasar el estilo, pero tenga en cuenta que las propiedades CSS deben ser 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' }) `Aquí hay un ejemplo simple con TypeScript:
import * as React from 'react'; import { FunctionComponent } from 'react'; import styled, { css } from 'styled-components'; interface IProps { isProcessing?: boolean; isDisabled?: boolean; onClick?: () => void; } const StyledButton = styled.button<IProps>` width: 10rem; height: 4rem; cursor: pointer; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); &:hover { background-color: rgba(0, 0, 0, 0.75); } ${({ disabled }) => disabled && css` opacity: 0.5; cursor: not-allowed; `} ${({ isProcessing }) => isProcessing && css` opacity: 0.5; cursor: progress; `} `; export const Button: FunctionComponent<IProps> = ({ children, onClick, isProcessing, }) => { return ( <StyledButton type="button" onClick={onClick} disabled={isDisabled} isProcessing={isProcessing} > {!isProcessing ? children : <Spinner />} </StyledButton> ); }; <Button isProcessing={this.state.isProcessing} onClick={this.handleClick}>Save</Button>