Section 32 – Lesson 420 – Complete 2020 Web Development Bootcamp

Lesson 420 – Inline Styling for React Elements

In order to use inline styling of an html element the style being applied must be contained in a javascript object inside of curly braces. In order for the javascript code to be properly interpreted it must also be contained within a set of curly braces so you end up with code which looks like this –

ReactDOM.render(<h1 style={{color: "red"}}>Hello World!</h1>, document.getElementById("root"));

You can save your styles in a variable like this –

const customStyle = {
  color: "red",
  fontSize: "20px",
  border: "1px solid black"
}

You can then use that variable name within the curly braces to apply the styles like this –

ReactDOM.render(<h1 style={customStyle}>Hello World!</h1>, document.getElementById("root"));