Skip to main content

Conditional Styling in React JS

Saleh is an experienced Web Developer and uses his knowledge and experience to guide people looking to learn Web Dev and new technologies

This guide will break down conditional styling in React JS.

This guide will break down conditional styling in React JS.

Conditional styling in React JS is an important and widely used method for DOM manipulation and styling based on a state or condition.

In this article, we will be learning how to apply conditional logic to different forms of CSS styles in React JS. We will discuss inline styles and styled components and apply both of them to a practical example.

What Is Conditional Styling?

In simple words, it is changing CSS based on a set of conditions or a state. The CSS that will be changed and/or added based on a condition can be inline styles or styled components among the many different ways of adding CSS in React.

Let's say we have a toggle menu, in this case conditional styling will be used to show/hide the menu based on a state. Similarly, we can open and close a popup using this method too.

Conditional Styling With Inline Styles

Now lets create a simple popup with inline styles. The popup will open on button click and will close when the close button is clicked. A state called open will be toggled by these buttons. The state will in turn change the inline styles. Add the following code to your App.js:

import "./App.css"

function App() {
  const styles = {
    popup:{
      display:"none",
      opacity:"0"
    }
  };
  return (
    <div className="main">
      <button className="open_button">Open!</button>
      <div className="popup" style={styles.popup}>
        <h1>This is a popup!</h1>
        <button className="close_button">Close!</button>
      </div>
    </div>
  );
}

export default App;

The popup is very simple itself and most of the CSS is coming from an external stylesheet which can be custom according to your needs. The only necessary style is the inline style that is currently hiding the popup.

Now we will add then state and the onclick functions on the buttons. When the user clicks the open button, the state will be set to true and the opposite when the close button is clicked.

function App() {
  const [open,setOpen] = useState(false)
  const styles = {
    popup:{
      display:"none",
      opacity:"0"
    }
  };
  return (
    <div className="main">
      <button className="open_button" onClick={()=>{setOpen(true)}}>Open!</button>
      <div className="popup" style={styles.popup}>
        <h1>This is a popup!</h1>
        <button className="close_button" onClick={()=>{setOpen(false)}}>Close!</button>
      </div>
    </div>
  );
}

Currently both the display and opacity are set to false and 0 respectively. Now we will add an inline if statement that will display the popup if the state is false and hide it if it is true. We will apply this to both the display and opacity.

Scroll to Continue

Read More From Owlcation

import { React, useState } from "react";
import "./App.css"

function App() {
  const [open,setOpen] = useState(false)
  const styles = {
    popup:{
      display: open ? "flex" : "none",
      opacity: open ? "1" : "0",
    }
  };
  return (
    <div className="main">
      <button className="open_button" onClick={()=>{setOpen(true)}}>Open!</button>
      <div className="popup" style={styles.popup}>
        <h1>This is a popup!</h1>
        <button className="close_button" onClick={()=>{setOpen(false)}}>Close!</button>
      </div>
    </div>
  );
}

export default App;

And now the popup is functioning as required. So this is how conditional styling can be used with inline styles. A demo can be seen below:

Inline Styles Example

Inline Styles Example

Conditional Styling With Styled Components

Now let's look at how to implement conditional styling with Styled Components, allows you to use component-level styles in your applications. We will create the same popup again but this time with styled components.

The state and functions will remain the same. Firstly import styled components using the following command

npm install --save styled-components

Next, we will create a Popup component with styled components and render it in place of the popup div.

import { React, useState } from "react";
import styled from "styled-components";
import "./App.css"

function App() {
  const [open,setOpen] = useState(false)
  const Popup = styled.div`
    display: ${open ? "flex" : "none"};
    opactiy: ${open ? "1" : "0"};
  `;
  return (
    <div className="main">
      <button className="open_button" onClick={()=>{setOpen(true)}}>Open!</button>
      <Popup className="popup">
        <h1>This is a popup!</h1>
        <button className="close_button" onClick={()=>{setOpen(false)}}>Close!</button>
      </Popup>
    </div>
  );
}
export default App;

Now we will add the conditional styles inside this Popup component. The syntax is slightly different but the logic is the same. This will be the final code:

import { React, useState } from "react";
import styled from "styled-components";
import "./App.css"

function App() {
  const [open,setOpen] = useState(false)
  const Popup = styled.div`
    display: ${open ? "flex" : "none"};
    opactiy: ${open ? "1" : "0"};
  `;
  return (
    <div className="main">
      <button className="open_button" onClick={()=>{setOpen(true)}}>Open!</button>
      <Popup className="popup">
        <h1>This is a popup!</h1>
        <button className="close_button" onClick={()=>{setOpen(false)}}>Close!</button>
      </Popup>
    </div>
  );
}
export default App;

And that is how you add conditional styling in react js using both inline styling and styled components.

Thanks for reading.

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2022 Saleh Mubashar

Related Articles