What’s the difference between standard CSS and CSS inside JSX?

How to use JSX in React.js? »

In plain HTML/CSS, you do something like this:

<div style=”background-color: blue”>
Some text here
</div>

In JSX however, this is what you write:

<div style={{ backgroundColor: ‘blue’ }}>
Some text here
</div>

You’d notice quite a few differences:

  1. Instead of putting all the style properties inside double quotes, you put them inside {{ and }}.
  2. For every key-value pair, as in backgroundColor: ‘blue’, the properties are represented by the keys. And the values are put inside single quotes ‘ ‘.
  3. When there are properties like background-color (two words separated by hyphen), you’d need to remove the hyphen between them and capitalize the later word (camelCasing). For example, here are some JSX style properties for their respective CSS styles:
CSSJSX
font-familyfontFamily
text-decorationtextDecoration
line-heightlineHeight
font-sizefontSize
colorcolor
heightheight
borderborder
border-topborderTop

You’d also notice that the properties which don’t have two or more words together are written as is, like color, height, width, etc.

With that in mind, let’s get back to our code and update as required (index.js file):

// Import Libraries
import React from 'react';
import ReactDOM from 'react-dom';

// Create React Component and add some styles to it
const App = function() {
return 
<div>

<h1 style ={{color:’red’}} >
Hello there!
</h1>
 I am a paragraph. 
</div>;
};

// Show React Component on the browser
ReactDOM.render(
<App/>,
document.querySelector('#root')
);

Leave a Comment