Slide 16.17: React CSS

React CSS

There are many ways to style React with CSS, like inline styling and stylesheet. This slide will take a look at inline styling.

Inline Styling
To style an element with the inline style attribute, the value must be a JavaScript object. In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example below is written inside two sets of curly braces {{ }}. Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax. Use backgroundColor instead of background-color:

<h3 style={{color:"red"}}>Hello Style!</h3>

JavaScript Object
You can also create an object with styling information, and refer to it in the style attribute. For example, create a style object named mystyle:

const mystyle = {
  color: "white",
  backgroundColor: "DodgerBlue",
  padding: "10px",
  fontFamily: "Arial"
};