Styling in Reactjs - An Overview and Walkthrough Tutorial

Subscribe to my newsletter and never miss my upcoming articles

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 an 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 function.

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.

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.

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.
A Big Thank You to Edidiong Asikpo for Proofreading.

No Comments Yet