react-moveable 和 css 模块 - 不能应用 css 样式答案

【问题标题】：react-moveable and css modules - cant apply css stylingreact-moveable 和 css 模块 - 不能应用 css 样式
【发布时间】：2021-06-21 14:07:48
【问题描述】：

我正在使用 react-moveable 为某些组件提供拖放支持。我试图让控制框消失，直到用户点击目标。

首先，我想对控制框应用一些 CSS，但我似乎做不到。文档指定可以设置一个类名，但由于某种原因它对我不起作用。

组件看起来像这样：


import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);
  return (
    <div className="container">
     <div>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}
      />
    </div>
  );
};

export default Label;

还有css模块文件label.module.css：

.moveable1 .moveable-line .moveable-direction  {
    background: red !important;

}

我尝试将 className 设置为字符串，在 css 文件中使用类名等等，但没有任何改变控制框样式。

有什么想法吗？

【问题讨论】：

标签： css reactjs css-modules moveabletype

【解决方案1】：

控制框由缩放和渲染方向定义

我们可以让它消失（缩放默认为 1）

zoom={0}

并修改/隐藏边框控件。（默认）

 renderDirections={["nw", "n", "ne", "w", "e", "sw", "s", "se"]} )

然后您可以使用普通的 onClick 函数和 useState 钩子将一些样式应用于目标 div。

import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);

const [styles, setStyles] = useState( {border: "1px solid green";} ) 

const handleStyles = e => { 
// Your styles... 
// Your setState Hook
setStyles({border: "1px solid blue"})

}
  return (
    <div className="container">
     <div onclick={handleStyles} style={styles}>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}


        { /** Hide the control box * /  }
        zoom={0}
        renderDirections{["nw", "n", "ne"]}
      />
    </div>
  );
};

export default Label;

文档：

缩放类型： https://daybrush.com/moveable/release/latest/doc/Moveable.html#zoom

渲染方向：https://daybrush.com/moveable/release/latest/doc/Moveable.html#.RenderDirections

CSS 样式框： https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-directions

? style={{ 背景：'黄色' }}

希望你觉得这很有用。问候， M。 ?

【讨论】：