React lets you add CSS inline styles that are written as attributes and passed to elements. With inline styles, you have the option to combine CSS syntax with JSX code.
Note: Using the style attribute as your primary means of styling elements is generally not recommended.
In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the style name, written in camelCase, and whose value is the style’s value, which is usually a string.
We can create inline styles in two ways:
style={styleVariable}
.style={{height: '10%'}}
.The following code creates inline CSS styles by directly passing the styling as an object:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './app.js'; ReactDOM.render( <App />, document.getElementById('root') );
Free Resources