conditional rendering in styled components

You can simply do this

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

And in your styles something like this:

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;  `}`;

I didn't notice any && in your example, but for conditional rendering in styled-components you do the following:

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

In the case above, background will be darkred when StyledYourComponent is rendered with active prop and limegreen if there is no active prop provided or it is falsyStyled-components generates classnames for you automatically :)

If you want to add multiple style properties you have to use css tag, which is imported from styled-components:

I didn't notice any && in your example, but for conditional rendering in styled-components you do the following:

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

OR you may also use object to pass styled, but keep in mind that CSS properties should be camelCased:

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

Here is an simple example with 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>