MENU


style

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. Eg.:


RESETRUNFULL
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',};function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;}
To support older browsers, you need to supply corresponding style properties:
RESETRUNFULL
To support older browsconst divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix};function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;}ers, you need to supply corresponding style properties:
React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. For example:
RESETRUNFULL
// Result style: '10px'<div style={{ height: 10 }}>
  Hello World!</div>// Result style: '10%'<div style={{ height: '10%' }}>
  Hello World!</div>