0 votes
in ReactJS by
edited by

How to use styles in React?

2 Answers

0 votes
by

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).

0 votes
by

The 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).

Related questions

0 votes
asked Jun 19, 2020 in ReactJS by JackTerrance
0 votes
asked Jul 2, 2019 in ReactJS by Venkatshastri
...