---
# System prepended metadata

title: Styling in Reactjs - An Overview and Walkthrough Tutorial

---

# Styling in Reactjs - An Overview and Walkthrough Tutorial

There are several ways of styling a **React** application, From inline styling, CSS, SASS and to 
using styling libraries like JSS and styled-components and much more.

In this tutorial, I'll be walking you through ways you can apply styles to your **Reactjs** application.


### Table of Content

- Inline Styling
- CSS-in-CSS
- CSS-in-JS

## Inline Styling

The simplest way of styling in Reactjs is the inline styling, because you don't need to install or import an external resource, just plain javascript. Here an element has its own style. Just like the normal way of applying inline style to an HTML element.

Here is an example:


```

import React from 'react'


function App(){

   return(

          <div style={{width:100,padding:"20px",backgroundColor:"#000000"}}>

             <h1 style={{

                    fontSize:"10px",

                    color: "#ffffff",

                    textAlign: "center"

                }}>

                Styling React App </h1>

          </div>

  )

}


export default App

```

You can also declare the styles as a variable outside the functio.

As an individual object variable and using them where you need:



```

import React from 'react'


function App() {

        return (

            <div style={divStyles}>

                <h1 style={headingStyles}> Styling React App </h1>

            </div>

        )

}

const divStyles = {

        width: 100,

        padding: "20px"

}


const headingStyles = {

        fontSize: "10px",

        color: "#fff",

        textAlign: "center"

}

export default App

```

or as a nested object:


```

import React from 'react'


function App() {

        return (

            <div style={styles.container}>

                <h1 style={styles.heading}>Styling React App </h1>

            </div>

        )

}


const styles = {

        container: {

            width: 100,

            padding: "20px"

        },

        heading: {

            fontSize: "10px",

            color: "#fff",

            textAlign: "center"

        }

}


export default App

```

Creating styles as variables makes it possible to use with other elements.

Styles can be passed in as props too:



```

import React from 'react'


function App() {

        return (

            <div style={styles.container}>

                <Heading style={styles.heading}>Styling React App </Heading>

            </div>

        )

}


const Heading = (props) => {

        return (



        )

};


const styles = {

        container: {

            width: 100,

            padding: "20px"

        },

        heading: {

            fontSize: "10px",

            color: "#fff",

            textAlign: "center"

        }

}




export default App

```


 **Note:** When using inline styling or when styling with JavaScript, always adhere to this:

- Property names should be written in camelCase: properties that has two names joined together with a dash(-) in CSS should be written in camelCase, e.g.:

```

background-color

```

 should be written as

```

backgroundColor

```

- String values should be written in quotes, e.g.:

```

textAlign: "center"

```

- Properties are separated by a comma (,) e.g.:

```

...

width:100,

backgroundcolor: "blue"

...

```

.



## CSS-in-CSS

In this part, we would look at different ways of styling with Pure CSS or call it Vanilla CSS and Sass.

### Vanilla CSS (CSS in React and Sass in React).

This is the most basic way of styling your application, using your vanilla CSS(your own style or a CSS library like Bootstrap, materialize etc) by importing it and referencing them in your element.

Create your CSS styles (or CSS libraries)

```

/*main.css*/

.container {

        width: 400px;

        height: 300px;

        padding: 10px 20px;

        margin: 10px;

        background-color: rgb(0, 0, 255);

}


.heading {

        display: inline-block;

        color: #ffffff;

        font-size: 38px;

}

```

then import it to your application



```

import React from 'react'

import './main.css'


function App() {

        return (

            <div className="container">

                <h1 className="heading">Using CSS in React</h1>

            </div>

        )

}

export default App

```

Simple Right?, Yeah.


#### Importing Sass file (.scss):

If your application was setup using **create-react-app** sass compiler is installed already you just need to go ahead and import it, if not you need to install it and make some configurations before using it.

Here is an example:


```

/*styles.scss*/

.container {

        width: 400px;

        height: 300px;

        padding: 10px 20px;

        margin: 10px;

        background-color: rgb(0, 0, 255);


        .heading {

            display: inline-block;

            color: #ffffff;

            font-size: 38px;

        }

}

```

then import it


```

import React from 'react'

import './styles.scss'


function App() {

        return (

            <div className="container">

                <h1 className="heading">Using SCSS in React</h1>

            </div>

        )

}

export default App

```


### CSS modules (CSS and Sass)

The great thing about using **create-react-app** for bootstrapping/setting-up your react application is that it comes with built-in compilers and transpilers so you don't need to install them separately, like when using CSS modules, you don't need to install it because it comes with it, you just go ahead and use it.

CSS modules is another way of using CSS in your React Application using your styles as modules, here is how:




```

/*styles.module.css*/

.container {

        width: 400px;

        height: 300px;

        padding: 10px 20px;

        margin: 10px;

        background-color: rgb(0, 0, 255);

}


.heading {

        display: inline-block;

        color: #ffffff;

        font-size: 38px;

}

```

**Note:** Your CSS file must be saved with (.module.css), like in the example above the CSS file is saved as *styles.module.css*,


Using the created CSS file, it should be imported as a module (as the name implies: CSS modules), and used with the className attribute.



```

import React from 'react'

import styles from './styles.module.css'


function App() {

        return (

            <div className={styles.container}>

                <h1 className={styles.heading}>Using CSS in React</h1>

            </div>

        )

}

export default App

```


#### How about Sass file (.scss)?

The same applies to .SASS files but its extention should end with (.module.scss), example: mainStyles.module.scss.

here is an example:




```

/*main-style.module.scss*/

.container {

        width: 400px;

        height: 300px;

        padding: 10px 20px;

        margin: 10px;

        background-color: rgb(0, 0, 255);


        .heading {

            display: inline-block;

            color: #ffffff;

            font-size: 38px;

        }

}

```

then import it to your application



```

import React from 'react'

import styles from './main-style.module.scss'


function App() {

        return (

            <div className={styles.container}>

                <h1 className={styles.heading}>Using SCSS in React</h1>

            </div>

        )

}

export default App

```

That's it for CSS-in-CSS.



## CSS-in-JS

There are several ways of styling a react application using this approach, but I will be pointing out only 2 JSS and Styled-Components.


### JSS (CSS+JS=JSS)

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

React-JSS integrates JSS with React using the new Hooks API. JSS and the default preset are already built-in.


#### Install

Before using JSS you have to install it, you can install it using yarn

```

> yarn add react-jss

```


#### Usage

First of all, you create your style by importing its createUseStyle hook



```

import React from 'react'

import {createUseStyles} from 'react-jss'

...

```

Then Create your Styles, React-JSS uses the default preset, most plugins are available without further configuration needed.




```

...

const useStyles = createUseStyles({

        container: {

            color: 'green',

            margin: {

                // jss-plugin-expand gives more readable syntax

                top: 30,

                right: 2,

                bottom: '1rem',

                left: 'auto'

            }

        },

        heading: {

            fontWeight: 'bold',

            fontSize: 38 // jss-plugin-default-unit makes this 38px

        }

})

...

```

Then Define the component using these styles and pass it the 'classes' prop.

 Use this to assign scoped class names.



```

function App() {

        const classes = useStyles();

        return (

            <div className={classes.container}>

                <h1 className={classes.heading}>Using JSS in React</h1>

            </div>

        )

}

```

This will compile to



```

//HTML equivilent

<div class="Div-container-1-25">

        <h1 class="Div-heading-1-26">Using JSS in React</h1>

</div>

```


```

//CSS equivalent

.Div-container-1-25 {

  color: green;

  margin: 30px 2px 1rem auto;

}

.Div-heading-1-26 {

  font-weight: bold;

  font-size:38px;

}

```

You can dive into Learning React-JSS [here](https://cssinjs.org/react-jss).




### Styled Components

**Styled Components** let you create a normal React component, that has your styles attached to it.


### Install

To use styled-components in your project, you need to install it by running this:

```

npm install --save styled-components

```

with no further build configurations, go ahead and use it.


#### Usage

Using **styled-components** is quite easy, to create styled-component you have to import styled:

```

import styled from 'styled-components'

```

let's create a reusable button

Create a Button component that'll render a <button> tag with some styles

```

const Button = styled.button`

  background: #fed11e88;

  border-radius: 3px;

  border: 2px solid #fcd224;

  color: #feb954;

  margin: 0 1em;

  padding: 17px;`

```

Use Button like any other React component – except it's styled.


```

function App() {

  return (

        <div>

          <Button>Click Me</Button>

        </div>

        )

}

```

In styled-component, you can use all the features of CSS you use, including media queries, all pseudo-selectors, nesting, etc.

To see more of styled-components check out it's [docs](https://styled-components.com/docs).


### Summary

I have been able to highlight some of the ways you can style your React Application. In my subsequent articles, I will elaborate more on individual approaches.


Thanks For Reading.  

