react-color库SliderPicker垂直旋转后点击定位异常如何解决？

你已经给SliderPicker传入了direction="vertical"参数，该组件本身原生支持垂直布局渲染，不需要额外通过transform: rotate(270deg)手动旋转。手动旋转会导致组件内部计算点击位置时使用的原始DOM坐标体系和旋转后的视觉坐标体系不匹配，这就是点击位置和选择圆点位置错位的直接原因。

直接删除PickerArea样式中的transform: rotate(270deg)属性，仅调整外层容器的宽高适配垂直布局的SliderPicker即可。修改后的参考代码如下：

const Wrapper = styled.div`
  height: 365px;
  width: fit-content;
  align-items: center;
  display: flex;
  padding: 0 20px;
`;
// 移除旋转相关样式即可
const PickerArea = styled.div`
  height: 100%;
`;

const PaintSelection = ({ circleColor, setCircleColor }) => {
  const { setActiveColor, recentColors } = React.useContext(Context);

  return (
    <Wrapper>
      <PickerArea>
        <SliderPicker
          direction="vertical"
          color={circleColor}
          onChange={(color) => {
            setCircleColor(color.hex);
            setActiveColor(color.hex);
          }}
        />
      </PickerArea>
    </Wrapper>
  );
};

内容的提问来源于stack exchange，提问作者Greg Gomez