About
The style attribute in React element.
It accepts a JavaScript object with camelCased properties rather than a CSS string.
Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage).
Articles Related
Vendor Prefix
CSS - (Browser) Vendor (Property) Prefix
Styles are not autoprefixed.
Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase “W”.
Example:
const 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>;
}
Example
Offline
The style attribute are in a variable object.
const divStyle = {
color: 'white',
backgroundColor: 'DarkTurquoise',
padding: '1rem',
display: 'inline-block',
borderRadius: '4rem'
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World with Offline Style!</div>;
}
ReactDOM.render(
<HelloWorldComponent/>,
document.getElementById('root')
);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>
Inline
The style attributes could also be given inline
function HelloWorldComponent() {
return <div style={{
color: 'white',
backgroundColor: 'DarkTurquoise',
padding: '1rem',
display: 'inline-block',
borderRadius: '4rem'
}}>Hello World with Inline Style!</div>;
}
ReactDOM.render(
<HelloWorldComponent/>,
document.getElementById('root')
);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>