# Inline Styling with React

## Inline Styling for Single Style Property

We can use `style` property to handle inline styling of **single element**.

{% tabs %}
{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

function App() {
  const name = "John Doe"
  
  return (
    <h1 style={{color: "#FF8C00"}}>Hello {`${name}`}!</h1>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))
```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
&#x20;To write inline style we have to follow 2 rules:
{% endhint %}

1. Write the styling property as a regular `JavaScript object`*.*

   ```jsx
   {color: "#FF8C00"}
   ```
2. Surround the styling object with curly braces `{}` so that `JSX` knows & treats it as `JavaScript`.&#x20;

   ```jsx
   {{color: "#FF8C00"}}
   ```

## Inline Styling for Multiple Style Property

We can define styles in a `JS variable` and use it in `JSX` element to handle inline styling of **multiple elements**.

{% tabs %}
{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

function App() {
  const name = "John Doe"
  
  // Defining Variable for Style
  const styles = {
    color: "#FF8C00", 
    backgroundColor: "#FF2D00",
    fontSize: 50 
  }
  
  return (
    // Single '{}' around 'styles' since it is a JS Object.
    <h1 style={styles}>Hello {`${name}`}!</h1> 
  )
}

ReactDOM.render(<App />, document.getElementById("root"))
```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

## Change Inline Style Dynamically

We can change inline style dynamically based on certain conditions.

```jsx
// Some code
import React from "react"
import ReactDOM from "react-dom"

function App() {
  const date = new Date()
  const hours = date.getHours()
  let timeOfDay
  
  // defining styles
  const styles = {
    fontSize: 30
  }
  
  if (hours < 12) {
    timeOfDay = "morning"
    // creating a property of `styles` object
    styles.color = "#04756F"
  } else if (hours >= 12 && hours < 17) {
    timeOfDay = "afternoon"
    // creating a property of `styles` object
    styles.color = "#8914A3"
  } else {
    timeOfDay = "night"
    // creating a property of `styles` object
    styles.color = "#D90000"
  }
  
  return (
    // rendering styles dynamically based on condition
    <h1 style={styles}>Good {timeOfDay}!</h1>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

```
