There are many different ways to use styles in React. This lesson is focused on one of them: inline styles.
An inline style is a style that’s written as an attribute, like this:
Notice the double curly braces. What are those for?
The outer curly braces inject JavaScript into JSX. They say, “everything between us should be read as JavaScript, not JSX.”
The inner curly braces create a JavaScript object literal. They make this a valid JavaScript object:
If you inject an object literal into JSX, and your entire injection is only that object literal, then you will end up with double curly braces. There’s nothing unusual about how they work, but they look funny and can be confusing.
Instructions
Click Run to see the <h1></h1> rendered to the browser. How can you add styles to this poor <h1></h1>?
Let’s give the <h1></h1> an inline style.
Give the <h1></h1> an attribute with a name of style. The attribute’s value should evaluate to this object: