变量 css 不适用于反应 js

Question

this is a react app. my css class is not changing even though the state assign to track the boolean value is changing. I've passed my states accordingly for this still not working. here is the github url

my app.js file -

import React, { useState } from "react";

// Import Styles
import "./styles/App.css";

// Import Components
import Hello from "./components/Hello";
import Rectangle from "./components/Rectangle";
import Button from "./components/Button";

function App() {
  const [colorStatus, setColorStatus] = useState(false);

  return (
    <div className="App">
      <Hello />
      <Rectangle colorStatus={colorStatus} />
      <Button colorStatus={colorStatus} setColorStatus={setColorStatus} />
    </div>
  );
}

export default App;

button.js -\

import React from "react";

const Button = ({ colorStatus, setColorStatus }) => {
  return (
    <div className="button">
      <button className="btn-1" onClick={() => setColorStatus(!colorStatus)}>
        Press
      </button>
    </div>
  );
};

export default Button;

rectangle.js -

import React from "react";

const Rectangle = ({colorStatus}) => {
  return <div className={`rectangle ${colorStatus ? 'active-rectangle' : '' }`}></div>;
};

export default Rectangle;

necessary css -

.rectangle {
  width: 50vw;
  height: 50vh;
  background: rgba(255, 0, 0, 0.4);
  position: fixed;
  top: 30%;
  left: 35%;
}

.active-rectangle {
  width: 50vw;
  height: 50vh;
  background: rgba(0, green, 0, 0.4);
  position: fixed;
  top: 30%;
  left: 35%;
}

Answer 1

Your .active-rectangle css-rule needs correction like so:-

.active-rectangle {
  width: 50vw;
  height: 50vh;
  background: rgba(0, 255, 0, 0.4);
  position: fixed;
  top: 30%;
  left: 35%;
}

So your state should be getting updated and the active-rectangle class is getting applied. Just the background property isn't getting applied properly. Rest must still be getting applied.

background isn't getting applied properly because you cannot use green when a decimal value is expected inside rgba(...) .

Answer 2

Actually your css class is getting changed (according to the url you provided).

Problem seems to be with the usage of background: rgba(0, green, 0, 0.4) . Specifically in rgba(0, green, 0, 0.4) .

Instead of green , it should have been a number from 0 to 255 to denote the green part of the colour. G of RGBA from rgba function you are using

checkout https://cssreference.io/property/background-color/

Answer 3

The problem, as said here before is the background property

Lets refactor the code a bit while we are in it.

.rectangle {
  width: 50vw;
  height: 50vh;
  background: rgba(255, 0, 0, 0.4);
  position: fixed;
  top: 30%;
  left: 35%;
}

.rectangle.active {
  background: rgba(0, 255, 0, 0.4);
}

import React from "react";

const Rectangle = ({colorStatus}) => {
  return <div className={`rectangle ${colorStatus ? 'active' : '' }`}></div>;
};

export default Rectangle;

Sandbox: https://codesandbox.io/s/friendly-galileo-gwzbh?file=/src/components/Rectangle.js