INLINE CSS STYLING:

Syntax of Inline styling in React JS (JSX) is slightly different than applying inline styling in Html. In order to apply inline syle in css we need to use following syntax:

<h1 style={{textTransform: 'capitalize', color: 'red'}}>This is first Component</h1>

or

const headingstyle = {textTransform: 'capitalize', color: 'red'};
<h1 style={headingstyle}>This is first Component</h1>

Note that in html text tranformation has attribute name “text-transformation” but in reactJS it will be “textTransform”. Also for text center, attribute is “textCenter” rather than “text-center”.