How to change the styles of a toggle button, defined in the app.css when button is clicked? When clicked again it should change back to white mode

Question

// this is app.js    

import './App.css';
import React, { useState } from "react";
    
    
    function App() {
      return (<>
        <div id="container">
          <div id="inside">
            <button id="button" onClick={change}></button> //this is a button which wrapped in a div element.
          </div>
        </div>
      </>);
    }
    
    export default App;

We have a button. When button is clicked it will change its position to the right and dark colour should be applied. When clicked again, the button should switch to the left position and it should change back to white mode.

//this is app.css

    #inside{
      width:156px;
      display: flex;
      height:49px;
      border:7px solid yellowgreen; // it should changed to 7px solid black when button clicked.
      border-radius: 50px;
      align-items:center;
      justify-content:flex-start; // i want to change this to flex-end when button clicked.
    }
    #container{
      display:flex;
      height:100vh;
      border:1px solid black;
      justify-content:center;
      align-items: center;
      background-color: black; //when button clicked it should be changed to yellow color.
    }
    #button{
      display:flex;
      border-style: solid;
      border-radius: 30px;
      height:45px;
      width:56px;
    }

Use a boolean state variable and toggle it. Then add/remove a class to <body> and write a stylesheet that changes the properties based on the class: codesandbox.io/s/gifted-buck-ljd0oc?file=/src/App.js — user5734311
– user5734311, Commented Aug 30, 2022 at 7:53
This is just one way, the other is to pass style props to the components that change the style directly based on the state. — user5734311
– user5734311, Commented Aug 30, 2022 at 7:54

blurk · Accepted Answer · 2022-08-30 08:01:28Z

1

You will need a .active class, and a state for toggling active status:

In your App.js

function App() {
  const [active, setActive] = useState(false);
  const change = () => {
    setActive(!active);
  };

  return (
    <>
      <div id="container" className={`${active && 'active'}`}>
        <div id="inside" className={`${active && 'active'}`}>
          <button id="button" onClick={change}></button> //this is a button
          which wrapped in a div element.
        </div>
      </div>
    </>
  );
}

In your app.css

#inside {
  width: 156px;
  display: flex;
  height: 49px;
  /* it should changed to 7px solid black when button clicked. */
  border: 7px solid yellowgreen;
  border-radius: 50px;
  align-items: center;
  /* i want to change this to flex-end when button clicked. */
  justify-content: flex-start;
}

#container {
  display: flex;
  height: 100vh;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
  /* //when button clicked it should be changed to yellow color. */
  background-color: black;
}

#button {
  display: flex;
  border-style: solid;
  border-radius: 30px;
  height: 45px;
  width: 56px;
}

#container.active {
  background-color: yellow;
}

#container.active #inside {
  justify-content: flex-end;
  border-color: black;
}

Hope this help.

answered Aug 30, 2022 at 8:01

blurk

2552 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahul Mohanty Over a year ago

app.js=> className={${active && 'active'}} app.css=>#container.active { background-color: yellow; } active is true when button clicked but in ${active && 'active'} what is 'active'? you are comparing active which is true and what is 'active' here?

blurk Over a year ago

It's just my habbit of using Short-circuit evaluation. You may want to read it here. It's like this: if the active is true then active && 'active' return 'active' else it will return false and className will be empty.

Collectives™ on Stack Overflow

How to change the styles of a toggle button, defined in the app.css when button is clicked? When clicked again it should change back to white mode

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related