Inline styling React

How to write inline styling in React js

Posted by Margie Crona on July 10, 2022

Inline styling React

How to write inline styling in React js

Posted by Margie Crona on July 10, 2022

Here is one way to write inline styling:

export default class Header extends Component {

    render() {

        return (
           <div style={{backgroundColor:"#f4f4f4"}}>
              <h3 style={{color:"purple"}}>Step one</h3>
           </div>
        )
    }
}

If you notice, some of the kewords use camel-case. In the example above you have backgroundColor instead of background-color.

Here is another way:

export default class Header extends Component {

    render() {

        const style = {
            color:"purple",
            fontSize:"2rem",
            fontFamily:"ui-sans-serif"
        }

        return (
          <div style={style}>Step one</div>
        )
    }
}

In the example above, an object is used to store a collection styling to be used inline.

Hopefully this was helpful.