Frontend
.......................................................................................................
Signup to be notified when the Fluent React course
launches in MARCH 2025 .
(and get started with a 5-part free React course in the mean time.)
...........................................................................................

How to Implement Simple and Dynamic Styling in your React App Components in 4 Ways

1: Introduction => Styling in React

 
Whether you are building a simple or complex frontend app, your React components will need to get some decent styling to be user-friendly as well as to be taken seriously.
 
So, what are the different ways you can add some sizzle to the "look and feel" of your React components?
 
Here are four (4) ways to style your components, whether simply or dynamically.
 
Without much ado, here we go...
 

2: Styling Types in React

 

So, what are the four ways you can style your custom React components?

 

These are:
 
  • Inline CSS: This is when you use the built-in HTML `style` attribute to write CSS from inside the HTML/JSX tags.

  • CSS Stylesheets: This is when you import an external CSS stylesheet file into your React components and use the styles (i.e. CSS classes) defined in the stylesheet using the HTML `class` attribute.

    But, since your React component is written in JSX (which is an extension of JavaScript), the `class` attribute is a reserved keyword. So, instead, we use the `className` attribute in JSX and pass to it the CSS class that we want to use to style the tag it is called from.

  • JavaScript Style Objects: This is when you define a JavaScript object (enclosed in a pair of curly braces {}) and pass in the CSS properties and their respective values as the keys and values of the JavaScript object.

    You then pass this JS style object to the `style` attribute of your JSX tag/element to style it.

  • Styled Components: You can install NPM packages that provide pre-styled components that you can then import and use inside your custom components.

    The approach for installing these packages is the same but the names and scope of styled components they offer vary from one package to another.

 

Now, let's go into more details into each of these four ways of doing styling in React.

 

2a: Inline CSS Styling

HTML comes with a number of built-in properties that you can use to work with the HTML elements/tags in your DOM. One of these properties is the `style` attribute to which you can pass in the CSS properties and values to style your HTML elements with.

 

To implement inline styling in your React component's JSX, you should:
 
  • Use the `style` attribute from within your HTML/JSX tag

  • Define the CSS properties and styles in a pair of curly braces {}

  • Pass the CSS (that's already in a pair of curly braces) into another set of JavaScript curly {} braces.

 

Let's see this in action using an assumed `StylePost` component.

 

It currently looks like this:

import React from 'react'

const StylePost = () => {
  return (
    <div>
        <h3> Hello, Styles! </h3>
        <p>
            This is the first paragraph of this post.
        </p>
        <p>
            This is the second paragraph of this post.
        </p>
        <p>
            This is the last paragraph of this post.
        </p>
    </div>
  )
}

export default StylePost

 

Now, let's add some CSS styles to it using the built-in HTML `style` attribute.

 

So, update the `StylePost` component like this:

import React from 'react'

const StylePost = () => {
  return (
    <div>
        <h3 style={{color: 'blue'}}> Hello, Styles! </h3>
        <p>
            This is the first paragraph of this post.
        </p>
        <p style={{ 'marginBottom': '15px', 'padding':'10px'}}>
            This is the second paragraph of this post. And, it is stylish!
        </p>
        <p  style={{ marginBottom: 15px, padding:'10px'}}>
            This is the last paragraph of this post. It has a styling error. Can you spot it?
        </p>
    </div>
  )
}

export default StylePost
 
When defining your CSS styles inline (i.e. within your JSX tags), you should:
 
  • Pass the CSS styles to the JSX `style` property.

  • Use two pairs of curly braces to define the CSS styles:

    • The inner pair of { } is your regular CSS curly braces within which you define the CSS props and their respective values.

    • The outer pair of { } is the JavaScript braces. Remember that your markup is not HTML; it is JSX (which is an extension of JavaScript). So, you have to enclose your CSS inside a pair of JavaScript curly braces so that React can read and use it.

      That's why you have: `<h3 style={{color: 'blue'}}>` and NOT `<h3 style={color: 'blue'}>`.

    Got it?

  • Make the name of the CSS property lowercased if it is a single word (such as "color", "margin", "padding", etc.) and camelCased if it is two words or more (such as "marginBottom", "paddingLeft", "backgroundColor", etc.).

    DON'T use a dash between the words of the CSS property.

    So, these are invalid: "margin-bottom", "padding-left", "background-color", etc. Instead, make them camelCased, just like we did in our example above.

    The CSS property name can be either enclosed in quotes (such as "color", "marginLeft") or not. We used both approaches in the previous code example. Take a look at it again.

    Always enclose the value of the CSS property in a pair of "quotes".

    So, `<h3 style={{color: 'blue'}}>` is valid, but `<h3 style={{color: blue}}>` will cause an error.

    Even if the CSS value is a number, you have to enclose it in a pair of quotes or you will get an error. Please, keep that in mind.

 

Now, the last paragraph of our `StylePost` component has an error. Can you figure it out, know why and fix it? That's homework for you.

 

2b: CSS Stylesheets

 

Defining your CSS styles inline is good enough if all you need to do is style one element/tag of your component.

 

But, what if you want to define a whole set of CSS styles for many parts of your React component or for the various components of your app?

 

Well, you can put them inside a separate file with a ".css" extension. Then, you can import that stylesheet into the component you want to use it in or into a parent component (if you plan to use the same stylesheet in multiple components without having to import it into every single component).

 

The same applies if you are using a stylesheet:
 
  • from a CSS framework like Bootstrap, Material Design Lite, etc.

  • you found online (on Github or other places).

 

In each of these cases, you should:
 
  • import the stylesheet into a parent component (like `App.js`) or into the component you are building if you just need to use the stylesheet inside that one component.

  • Pass the CSS class (from the stylesheet) that you want to use to the `className` property of the JSX tag that you want to style. And, voila! You have a styled element.

    DON'T use the HTML `class` property in your JSX markup.

    JSX, as an extension of JavaScript, will throw an error since `class` is a reserved word in JavaScript.

    That's why we use the `className` property instead.

 

Code Time!

 

Let's assume:

  • We are using the Bootstrap CSS framework and have installed it in our React app

  • We want to use the CSS classes from the Bootstrap stylesheet to style the tags in our `StylePost` component

 

We will approach this in two simple steps:

 

  1. Import the Bootstrap stylesheet into the parent/top-level `App.js` component file.

    This way, we can reuse the classes from this stylesheet in any component of the app without needing to import it again into every component that needs to use the Bootstrap styles.

    So, in the React app's root `App.js` file, import the stylesheet, like this 
    
import 'bootstrap/dist/css/bootstrap.min.css'

  2. Update the `StylePost` component to use the CSS classes from the Bootstrap stylesheet, like this:

    
import React from 'react'

const StylePost = () => {
  return (
    <div>
        <h3 className='text-primary'> Hello, Styles! </h3>
        <p>
            This is the first paragraph of this post.
        </p>
        <p className='mb-3 p-2'>
            This is the second paragraph of this post. And, it is stylish!
        </p>
        <p  className='mb-3 p-3'>
            This is the last paragraph of this post. It no longer has a styling error.
        </p>
    </div>
  )
}

export default StylePost
You will notice that, in the updated `StylePost` component, we are:

  • using the CSS classes defined in the Bootstrap stylesheet. ("primary" is the class for blue); "mb" is "margin-bottom" and "p" is "padding".

  • passing the CSS classes to the JSX `className` property and not to a `class` property as is the norm in plain HTML.

 

If you need to be exta sure which CSS classes to use for optimal styling results, please, consult the official documentation (if any) of the stylesheet you are using or dip into the stylesheet itself and see for yourself.

 

2c: JavaScript Object Styling

 

Sometimes, you may want to define your own custom CSS styles without having to do it inline or putting it into an external stylesheet (maybe because that would be overkill for a few simple styles.)

 

A close solution is to define the CSS styles inside the React component itself (but not inside the component's `return()` statement).

 

A good rule of thumb is to name the CSS style's object after the tag/element you will be styling it with. This helps prevent confusion.

 

So, let's update our `StylePost` component to use JavaScript style objects, like this:

import React from 'react'

const StylePost = () => {
  return (
    <div>
        <h3 style={headerStyle}> Hello, Styles! </h3>
        <p>
            This is the first paragraph of this post.
        </p>
        <p style={paragraphStyle}>
            This is the second paragraph of this post. And, it is stylish!
        </p>
        <p  style={paragraphStyle}>
            This is the last paragraph of this post. It no longer has a styling error.
        </p>
    </div>
  )
}

const headerStyle = {
  color: 'blue'
}

const paragraphStyle = {
  'marginBottom': '15px',
  'padding': '10px'
}

export default StylePost
Here, you will notice that we:
 
  • defined the JavaScript style objects outside the body of the component's function (so that our component code doesn't begin to get bloated, etc.)

  • defined the CSS property in lowercase or camelCase (if it contains more than one word.)

  • enclosed all the values of the CSS properties in a pair of "quotes".

  • passed the JS style object to the tag's `style` property in a pair of JavaScript curly braces { }.

 

Your component should work the same way it did when you used inline CSS styles.

You can pass as many sets of CSS properties (and their values) to a single JavaScript style object as you want. As long as they are valid and separated by commas, your styling object should work bug-free.

 

These three ways (inline, using stylesheets and JS style objects) of styling your React components are the most common you will find and (possibly) use yourself as you develop more and more React apps.

 

You can consider this simple styling.

 

But then, there is also dynamic styling (which we will cover in a moment after we take a look at something called "styled components.")

 

2d: Styled Components

If you are comfortable with your CSS skills, you can create custom CSS styles (inline or in an external stylesheet or in a JavaScript style object). If you are not (or if you just don't want to), you can use the styling classes from a CSS framework (like Bootstrap, Material Design Lite, etc.)

 

But you can go even further if that's not enough for you: you can use styled components.

 

Styled components are just that: they are commonly-used elements (such as buttons, dialog boxes, forms, headers, tables and so on) that you find in almost any frontend/React app. Of course, you can write inline CSS or use CSS classes from an external stylesheet to style those elements.

 

But some developers are just too lazy (or comfortable?) to do that. So, some helpful souls out there decided to create pre-styled React components/elements (like buttons, forms, dialog boxes etc.) that you can then just import and use in your own React components. These are known as styled components.

 

Styled components are usually put together and distributed as an NPM package, so that you can install one package (using `npm` or `yarn`) and then have a variety or pre-styled components that you can then import and use in your React app's custom components. Some of these styled component packages include:

 

  • [react-bootstrap]()

  • [react-mdl?]()

  • [third-one]()

 

You can look at the official documentation of each of these packages and see which appeals to you the most enough that you want to use it in your own custom React components.

 

So, for example, assuming you decided to use the [react-bootstrap]() styled components package, you will just have to:
 
  •  install the `react-bootstrap` package (and any of its dependent packages like the main `bootstrap` package)

  • import the `react-bootstrap` package's files (CSS and JS, if needed) into your React app's root `App.js` component file

  • import the individual styled components you want to use (such as `Container`, `Button`, etc.) into your app's custom components (such as your `Home`, `AboutMe`, or other components).

  • apply any of the variable parts of the styled components (such as the `variant`/color or size of the button, etc.) so that it matches your UI styling preference.

 

Irrespective of which styled component package you decide to go with, the installation, setup and usage will follow the steps outlined above.

 

For specific details about using any of these packages, please, see their official documentation (which I listed above.)

 

3: Dynamic Styling in React Components

 

There are cases where you need to dynamically-style your React components based on a number of factors, including:

 

  • the value of the component's local state (e.g. whether your form component's `isValid` boolean value is `true` or `false`)

  • user input or lack thereof (such as highlighting a form field in red if a user doesn't fill it in properly)

  • and other scenarios (depending on the logic and intended UI and UX of your app)

 

In simple terms, you have a condition, which if:
 
  • `true`: applies styleA

  • `false`: applies styleB

 

In pseudocode, this takes the form of :
 
`condition ? 'styleA' : 'styleB'` which simply means that if the condition evaluates to `true`, apply "styleA", else apply "styleB".

 

You would usually pass this conditional statement to the JSX tag's `style` or `className` properties.

 

In the following sections, we will take a look at how to do dynamic styling in your React components using some simple code examples.

 

So, time to dig into the details ...

 

3a:Dynamic Inline CSS Styling

To implement dynamic styling using inline CSS in your React components, you:
 
  • apply the styling condition to the value of the CSS property.

  • pass that to a pair of JavaScript curly braces

  • and pass that to the JSX tag's `style` property

 

Dynamically-styling your React components using inline styles will take the form of:

`{ cssProperty: condition ? 'valueA' : 'valueB'}` which will be passed to the `style` property of the JSX element you are styling.

 

Let's update our `StylePost` component to color the paragraph's text "green" if a student passed and "red" if he/she failed the exam.

import React, {useState} from 'react'

const StylePost = () => {
  const [passed, setPassed] = useState(false)

  return (
    <div>
        <h3 style={{color: passed ? 'green': 'red'}}> Student Grade </h3>
        <p>
            This is the first paragraph of this post.
        </p>
        <p style={{ 'marginBottom': '15px', 'padding':'10px'}}>
            This is the second paragraph of this post. And, it is stylish!
        </p>
        <p  style={{ marginBottom: '15px', padding:'10px'}}>
            This is the last paragraph of this post. It has a styling error. Can you spot it?
        </p>
    </div>
  )
}

export default StylePost
 
Please, review the notes above and look at how we implemented the dynamic inline style in our component's (`<h3>`) header tag.

 

3b: Dynamic CSS Stylesheet Classes

You can also implement dynamic styling when using CSS classes in your JSX tags using the `className` property.

 

The approach would be like:

`<h3 className={condition ? 'classA' : 'classB'> Student Grade </h3>`

 

This will pass the "classA" CSS class to the `className` property if the condition is true, else the "classB" CSS class will be passed to the `className` property (if the condition was false).

 

So, to use Bootstrap's `text-success` (for green text) and `text-danger` (for red text) CSS classes, we can write the `h3` tag to use this conditional styling like this:

<h3 className={passed ? 'text-success' : 'text-danger'}> Student Grade </h3>
So, to use conditional styling using CSS classes, you should:
 
  • pass a pair of JavaScript curly braces {} to the JSX tag's `className` property.

  • pass the conditionally-styled classes within the pair of JavaScript curly braces.

 

And, that's it.

 

Please, review the example and the notes that follow and implement it in your own (even if test-only) component to make sure you get the hang of it.

 

3c: Dynamic JavaScript Object Styling

 

JavaScript style objects can also be dynamically used inline by passing it to the `style` property of the JSX tag.

 

To implement dynamic styling using JavaScript style objects, you should:
 
  • define the style objects (one for when the condition is `true` and another for when the condition is `false`.)

  • conditionally pass the style objects inside a pair of JavaScript curly {} braces

    pass the pair of curly braces with the conditionally-styled objects to the JSX tag's `style` property.

 

A sample will follow this approach:
`<h3 style={passed ? successStyle: failStyle}> Student Grade </h3>`

 

So, let's re-implement our `StylePost` component to use dynamic styling objects, like this:

import React, {useState} from 'react'

const StylePost = () => {
  const [passed, setPassed] = useState(false)

  return (
    <div>
        <h3 style={passed? successStyle : failStyle}> Hello, Styles! </h3>
        <p>
            This is the first paragraph of this post.
        </p>
        <p style={paragraphStyle}>
            This is the second paragraph of this post. And, it is stylish!
        </p>
        <p  style={paragraphStyle}>
            This is the last paragraph of this post. It no longer has a styling error.
        </p>
    </div>
  )
}

const successStyle ={
  color: 'green'
}

const failStyle ={
  color: 'red'
}

const paragraphStyle = {
  'marginBottom': '15px',
  'padding': '10px'
}

export default StylePost
And, dear fellow React Developers, that's how you implement both simple and dynamic styling inside your React components.

 

Please, review the instructions and code samples on your own time to get a better understanding of how this works. Then, implement the same thing in your own components. Wanna do a one-up? Push your code to your Github account and share the link with your colleagues.

 

Till next time, stay awesome and develop apps that make our beautiful world a more beautiful place to be for all of us.
 

Technical Reference

Here are some resources to help you better learn about styling (generally) and styling with respect to your React components.
  • ["React Developer" Newsletter]()

  • [W3C School CSS Guide]()

  • [React.dev Styling Guide]()

  • [Fluent React Course [Wait List]](): same as above with the `referrer` being the link/URL of this article (to track traffic and __signup source__: how to do that? See ML and Matomo docs and online biz forums for same; Ask on 30x500 channels)

Developer Guides Related to This One:

Please, share your insights, concerns and experiences about the topic and/or content of this article.