Navigate

Home
Learn
Styling in React - A Complete Guide

Styling in React - A Complete Guide

$$/$$

Styling makes a website look better. It is used to give a better appearance to the DOM elements. This is analogous to how painting the walls of your house makes them look better.

$$/$$

Now that you know that React offers styling in two ways — inline and external, let’s look at how to change the looks of the Phone Directory application using both the ways.

$$/$$

You learned the inline way of styling components, which is quite different from styling in HTML. So, here, you get another way in which JSX differs from HTML.

Given below is an example that shows two approaches of using inline styling to style the Header component inside the Phone Directory app.

Example (Inline Styling):

Approach 1 - Directly writing style alongside JSX:

<div style={{textAlign: 'center', padding: 20, background: '#000', color: '#fff', textTransform: 'uppercase'}}>
   Phone Directory
</div>

Approach 2 - Moving style as constant object:

const headerStyle = {
   textAlign: 'center',
   padding: 20,
   background: '#000',
   color: '#fff',
   textTransform: 'uppercase'
};

<div style={headerStyle}>
   Phone Directory
</div>

You can commit your code with “Styled ‘Header’ (Inline Styling)” as the commit message and view the diff here.

Let’s look at another way of styling these components

$$/$$

As seen in the last video, external styling is quite similar to using external CSS.

Commit your code at this stage with “Styled ‘Header’ (External Styling)” as the commit message. You can view the code diff here.

Notes:

Inline Styling

It allows you to write styles in the same line with the element or component. This is why it is called ‘inline’ styling.
The style property is used with the element or component to be rendered into the DOM.
The style property accepts a JavaScript object enclosed in curly braces.
Two curly braces are used with the style property — one to evaluate the expression inside the JSX code and the other to represent a JavaScript object, which is taken as input by the style property.
```
<div style={{}}>
   Phone Directory
</div>
```
The property names look like CSS property names, but they are not exactly like them. These names are actually JavaScript identifiers; they can be considered as the keys (or properties) of a JavaScript object.
The property names must be written in camelCase. Unlike CSS, hyphens are not allowed in JSX because the JSX code gets converted to JavaScript code, and hyphens are not allowed in JavaScript identifiers.
```
<div style={{textTransform: 'uppercase'}}>
   Phone Directory
</div>
```
This is the reason why textTransform is written in camelCase in JSX unlike text-transform in CSS. In case you fail to follow this, you will get an error saying “Uncaught SyntaxError: Inline Babel script: Unexpected token”.
The property values look like CSS property values, but they are not exactly like them. These values can be considered the values corresponding to the keys (or properties) in a JavaScript object. Since all the values in JavaScript must be of a valid datatype, care must be taken regarding each value correctly mapping to a valid datatype in JavaScript.
```
<div style={{background: '#000'}}>
   Phone Directory
</div>
```
This is the reason why '#000' is written inside quotes, because it corresponds to a string value. In CSS, you must write it without quotes in order to make it work.
All property-value pairs are separated using the comma operator. The reason is that the style property accepts a JavaScript object where a comma should be used in contrast to a CSS style, where a semicolon is used instead.
When a component or element is styled by moving out style as a constant object, only one pair of curly braces is used in the style property.

External Styling

Write all the styles in an external stylesheet. This is similar to writing external CSS.
Import this stylesheet in the file where the component or element is defined on which you want to apply the given style. Note that since the extension of a stylesheet is .css (not equivalent to .js or .jsx), you need to specify the file extension while writing the import statement for a stylesheet.

Watch the next video to take up a challenge!

$$/$$

The home page after styling should look like this:

‘Pretty’ job!

You can see the solution code here for styling the App component, which is your home page.