尝试通过更改状态挂钩来更改 React Style 属性答案

【问题标题】：Trying to change React Style attribute by changing state hook尝试通过更改状态挂钩来更改 React Style 属性
【发布时间】：2021-01-02 20:15:28
【问题描述】：

Transform 没有更新下面的样式组件。我已经在控制台记录了状态，以确保它正在发生变化，只是样式组件没有变化（它保持红色）。

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>
        </>
    )
}

【问题讨论】：

删除!important就可以了。

标签： reactjs react-hooks styling react-state react-styleguidist

【解决方案1】：

React 内联样式不知道 !important 属性。通常总有办法避免使用它，而且最好这样做。

如果你只是不避免使用 !important，它会在这里工作。

如果你必须设置它，这会起作用：

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;

【讨论】：