Why is "fontSize: 72px" wrong

JavaScript
#1

I wrote the style as the note said, “fontSize: 72px” and it turns out to be wrong, why? Thanks!(I know 72 is OK, but I don’t know what’s wrong with 72px)

  **Your code so far**


class Colorful extends React.Component {
render() {
  return (
    <div style = {{color: "red", fontSize: 72px}}>Big Red</div>
  );
}
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Introducing Inline Styles

Link to the challenge:

#2

Hi @RaymondGuo !

You don’t need to add the px because React will already add that for the inline styles.

You can read more about that in the docs here

2 Likes
#3

Thanks, and I already know that if I want to add units other than px, I need to wrap it into quotes.

#4

{ fontSize: 72px } ← Syntactically 72px looks like an identifier. But it’s a syntactically incorrect one (identifiers can’t start with numbers). That’s the problem.

In fact it gives you a descriptive error message:

SyntaxError: unknown: Identifier directly after number.

{ fontSize: '72px' } ← In this case '72px' is a string literal, JS doesn’t look anything up, there’s no problem.

1 Like
#5

Yep, get it , thanks!