Styling in JSX

React recommends using inline styles. When we want to set inline styles, we need to use camelCase syntax. React will also automatically append px after the number value on specific elements. The following example shows how to add myStyle inline to h1 element.

import React from ‘react’;

class App extends React.Component {

render() {

var myStyle = {

fontSize: 100,

color: ‘#FF0000’

}

return (

<div>

<h1 style = {myStyle}>Header</h1>

</div>

);

}

}

export default App;

Share this post
[social_warfare]
Specifying Children with JSX
Naming Convention

Get industry recognized certification – Contact us

keyboard_arrow_up