How to use inline styles in react

by Sai gowtham1min read
How to use inline styles in react

In react we can use style attribute to add the 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 backgroundImage.

function Who(props){

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