CODEWITHSUNDEEP
reactjsstyled-components
aletede91
aletede91

Reputation: 1166

Props conditional rendering using styled-components

I am using styled-components library inside a React application and I have this block for example:

const Wrapper = styled.div`
  background: red;
`;

I need to add some other style if a prop has a set value, something like:

const Wrapper = styled.div`
  background: red;
  color: white; // color should be added only if this.props.myProps == 'ok'
`;

What's the best way to do this?

Upvotes: 2

Views: 11672

Answers (3)

GollyJer
GollyJer

Reputation: 26672

Another syntax option.
This is actually how I write all my styled-components now. It makes things easier to iterate/update.

import styled, { css } from "styled-components";

const Wrapper = styled.div(
  (props) => css`
    background: red;

    ${props.isOK &&
    css`
      background-color: black;
      color: white;
    `}
  `
);

Upvotes: 8

Sabit Rakhim
Sabit Rakhim

Reputation: 458

You should add 

const Wrapper = styled.div`
  background: red;
  color: ${p => p.isOk ? 'white' : 'green'}; // color will be added only if this.props.myProps == 'ok', else color will be green
`;

To send this props you should use syntax like 

return (
  <Wrapper isOk={true}>Some text</Wrapper>
)

Upvotes: 0

HermitCrab
HermitCrab

Reputation: 3274

For one style:

const Wrapper = styled.div`
    background: red;
    color: ${props => props.myProps === 'ok' && 'white'};
`;

For multiple styles:

const Wrapper = styled.div`
    background: red;
    ${props => {
        if (props.myProps === 'ok') return `
            background-color: black;
            color: white;
        `
    }}
`;

Another option is to use styled.css:

// Define a pure group of css properties
const okStyle = styled.css`
    background-color: black;
    color: white;
`;

// Reuse okStyle inside a styled component
const Wrapper = styled.div`
    background: red;
    ${props => props.myProps === 'ok' && okStyle}
`;

Upvotes: 4

Related Questions