Styling in JSX in ReactJS

Let’s see how to do the styling of HTML elements in JSX.

Below is a code in HTML with styling

<div>
   <label class="label">Enter Email: </label>
   <input id="emailId" type="text" />
   <button style="background-color: red; color: white;>Subscribe</button>
</div>

If you insert above HTML code in your React application, you will get error like the below one

Let’s convert the styling as per JSX styling standards
Below is the converted code in JXS

<div>
    <label className="label">Enter Email: </label>
    <input id="emailId" type="text" />
    <button style= {{backgroundColor:'red', color:'white'}}>Subscribe</button>
</div>

Here we can see the difference between two statements

<button style="background-color: red; color: white;">Subscribe</button>
<button style= {{backgroundColor:'red', color:'white'}}>Subscribe</button>

Below is the difference:

• double quotes (“) at the starting and end are replaced by curly braces ({}).
• We do not use semicolons(;) to separate and end the properties. We just use comma(,) to separate the properties.
• The value of properties are enclosed in single quotes(‘) OR double quotes(“) to make them string.
• If there is any property name like background-color, hyphen(-) is removed and the property is renamed as per CamelCase standards, like backgroundColor.
• To indicate a CSS class for any element in JSX, we use className instead of class. We already use class keyword to define a class in our JavaScript code.

If you use this code, and write this code in index.js file. htmlFor is used so that we can map label tag with input tag

// Import the React and ReactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom';

// Create a React component. This is a function based component.
const App = function() {
    return (      
<div>
            <label className="label">Enter Email: </label>
            <input id="emailId" type="text" />
            <button style= {{backgroundColor:'red', color:'white'}}>Subscribe</button>
        </div>
    );
};

// Take the React component and display it on the screen. 
// There is div element with id='root' present in index.html in public folder.
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

the error message will not be displayed anymore and you will see the below output.

If you click on Enter Email, focus is moved to the textbox.