CODEWITHSUNDEEP
cssreactjsnext.jsstyled-components
Sins97
Sins97

Reputation: 387

Adding props on styled components getting opposite result

I have created styled components and Im changing a text color by passing props.

          <Button variant = 'colour' type="submit" form="myForm" className="submit-btn">
            Submit
          </Button>

export const FindFormModal = styled(Modal)`

  .submit-btn {
    width: 35%;
    padding: 12px;
    color:${props => props.variant === 'colour'  ? 'blue' : 'green'}
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
    margin: 0px 0 10px 0;
  }

`

In this if variant === 'colour' then show blue but I'm getting green. If i do variant !== 'colour' then I get blue.

Isn't have to be working opposite?

Upvotes: 0

Views: 33

Answers (1)

Jash1395
Jash1395

Reputation: 248

You don't usually want to be using className along with styled components.

export const FindFormModal = styled(Modal)`
    width: 35%;
    padding: 12px;
    color:${props => props.variant === 'colour'  ? 'blue' : 'green'};
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
    margin: 0px 0 10px 0;
`

<Button variant = 'colour' type="submit" form="myForm">
    Submit
</Button>

Upvotes: 1

Related Questions