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

Question

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

Answer 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;

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

Trying to change React Style attribute by changing state hook

styling

reactjs

react-styleguidist

react-hooks

react-state