Trying to change React Style attribute by changing state hook

Question

Transform is not updating the style component below. I have console logged the state to ensure that it is changing and it was, just not the style component (it kept the color red).

import React, {useState} from 'react';

const Carousel = () => {
    let [selectedIndex, setSelectedIndex] = useState(0)
    const [cellCount,] = useState(9);
    let [transform, setTransform] = useState({color: 'red'});

    const prevButton = () => {
        setSelectedIndex(selectedIndex-1);
        setTransform({color: 'green !important'})
        console.log(selectedIndex)
        console.log(transform)
    };

    const nextButton = () => {
        setSelectedIndex(selectedIndex+1);
        setTransform({color: 'red !important'})
        console.log(transform)
    }
return (
        <>
            <div className="scene">
                <div style={transform} className="carousel">
                    <div className="carousel__cell">1</div>
                    <div className="carousel__cell">2</div>
                    <div className="carousel__cell">3</div>
                    <div className="carousel__cell">4</div>
                    <div className="carousel__cell">5</div>
                    <div className="carousel__cell">6</div>
                    <div className="carousel__cell">7</div>
                    <div className="carousel__cell">8</div>
                    <div className="carousel__cell">9</div>
                </div>
            </div>
                <button onClick={prevButton}>
                    Previous
                </button>
                <button onClick={nextButton}>
                    Next
                </button>
        </>
    )
}

Remove the `!important` and it will work. – HichamELBSI Jan 02 '21 at 20:19 — HichamELBSI, Jan 02 '21 at 20:19

score 1 · Accepted Answer · answered Jan 02 '21 at 20:56

React inline style doesn't know the !important property. There is usually always a way to avoid using it, and it is better to do so.

If you just don't avoid using !important, it will work here.

If you have to set it, this would work:

import React, { useState } from 'react';

const Carousel = () => {
  let [selectedIndex, setSelectedIndex] = useState(0);
  let [transform, setTransform] = useState({ color: 'red' });

  const prevButton = () => {
    setSelectedIndex(selectedIndex - 1);
    setTransform({ ...{ color: 'green' } });
    // rotateCarousel();
    console.log(selectedIndex);
    console.log(transform);
  };

  const nextButton = () => {
    setSelectedIndex(selectedIndex + 1);
    setTransform({ ...{ color: 'red' } });
    console.log(transform);
    // rotateCarousel();
  };
  return (
    <>
      <div className="scene">
        <div
          ref={el => {
            if (el) {
              el.style.setProperty('color', transform.color, 'important');
            }
          }}
          className="carousel"
        >
          <div className="carousel__cell">1</div>
          {transform.color}
          <div className="carousel__cell">2</div>
          <div className="carousel__cell">3</div>
          <div className="carousel__cell">4</div>
          <div className="carousel__cell">5</div>
          <div className="carousel__cell">6</div>
          <div className="carousel__cell">7</div>
          <div className="carousel__cell">8</div>
          <div className="carousel__cell">9</div>
        </div>
      </div>
      <button onClick={prevButton}>Previous</button>
      <button onClick={nextButton}>Next</button>
      {transform.color}
    </>
  );
};

export default Carousel;

Trying to change React Style attribute by changing state hook

1 Answers1