CODEWITHSUNDEEP
cssreactjs
stack_overflow
stack_overflow

Reputation: 137

How to add a css property only when condition true using styled components and react?

i wanted to add border property only when isOpen condition true using styled components and react.

below is my code,

const Wrapper = styled.div<{ $isOpen: boolean }>`
    border: 1px solid black;
    display: flex;
`;

How to apply border only when isOpen is true?

could someone help me with this. thanks.

Upvotes: 0

Views: 61

Answers (2)

Rohitha
Rohitha

Reputation: 759

You can try like this:

const Wrapper = styled.div`    
    display: flex;

    ${({isOpen}) =>
        isOpen &&
          css`
          { 
            border: 1px solid black;
          }`
    }
`;

Upvotes: 1

TessavWalstijn
TessavWalstijn

Reputation: 1726

Grabbing an example from the home page of styled-components:

import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;

  ${props =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `};
`

How you would use it in the react renderer:

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

Upvotes: 0

Related Questions