How can I use conditional rendering in styled-components to set my button class to active using styled-components in React?
In css I would do it similarly to this:
<button className={this.state.active && 'active'}
onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
In styled components if I try to use '&&' in the classname it doesn't like it.
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>
)
}}
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"> etc
const 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 falsy Styled-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"> etc
const 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"> etc
const 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>