by Sai gowtham

How to use the inline styles in React

In react, we can use the style attribute to add a inline styles to the dom elements, but we need to pass the styles as a javascript object instead of css string.

Note: The JavaScript object properties should be camelCased.

Let’s see an example.

function Post(){
    return (
        <div>
            <h1>Main heading</h1>
            <p>some content</p>
        </div>
    )
}

Now, we are adding inline styles to the Post component.

function Post(){

 const divStyle = {
      backgroundColor: "#cccc", // camel cased
      height: "100px",
      color: 'yellow'
 }

    return (
        <div style= { divStyle } >            <h1>Main heading</h1>
            <p>some content</p>
        </div>
    )
}

In the above code, we passed a divStyle object to the style attribute.

Have you seen we are using the camelCased style properties like backgroundColor instead of background-color?

We can also pass the style object directly into the style attribute instead of storing it in the separate variable.

function Post(){
    return (
        <div style= {{                backgroundColor: "#cccc",                height: "100px",                color: 'yellow'          }}>            <h1>Main heading</h1>
            <p> some content</p>
        </div>
    )
}

More examples

class Hello extends React.Component {

  render() {
    return (
      <div>
        <h1 style={{ color: "red" }}>Welcome to reactgo.com</h1>      </div>
    )
  }
}

Adding a background image using inline styles.

function Welcome(props){

    return (
        <div style={
            {backgroundImage:"https://reactgo.com/img/download.png"}            }>
          <h1>{props.name}</h1>
        </div>
    )
}

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course