Styled Components => Problem

[Plee]

Hi there.
I am building a simple ternary operator inside the styled component. I got an error message on background-color: ${({ primary }) => (primary ? “red” : “blue”)};

Even the logic works fine, what could be the reason and how to fix it?

Here is the code:

import styled from "styled-components"
import PropTypes from "prop-types";

const StyledButton = styled.button`
  background-color: ${({ primary }) => (primary ? "red" : "blue")};
  display: flex;
  justify-content: center;
  padding: 5px;
  margin: 5px;
  border-radius: 15px;
`;


export default function Button ({primary, text })
 {
    return (
      <div>
        <StyledButton primary={primary}>{text}</StyledButton>
      </div>
    );
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
    primary: PropTypes.bool.isRequired,
  };

Thank you
P.

[lasjorg]

What error are you getting? The code you posted works for me.

[Plee]

The => it’s marked red. Is it normal?

[lasjorg]

I don’t what is causing that but it looks like a code highlight bug.

Right caret color becoming red incorrectly

It isn’t an error unless you get an error message or the code doesn’t run.

[Plee]

Thank you for sharing that. I always associate red color as warning…