Categories

Jul 2, 2019 in React JS

Q:

How to use styles in React?

1 Answer

Jul 2, 2019

he style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')'
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>
}

Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes in JavaScript (e.g. node.style.backgroundImage).

Click here to read more about React JS
Click here to read more about Insurance

Related questions

Madanswer
Jul 2, 2019 in React JS
Mar 1 in React JS
Jul 2, 2019 in React JS
...