react-moveable 和 css 模块 - 无法应用 css 样式

Question

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

所以首先，我想在控制箱上应用一些 CSS，但我似乎做不到。文档指定可以设置 className，但由于某些原因它对我不起作用。

组件看起来像这样：


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 文件中的 class 名称等等，但没有任何改变控制框样式。

有什么想法吗？

Answer 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

风格={{背景：'yellow'}}

希望您觉得这很有用。问候， M.

react-moveable 和 css 模块 - 无法应用 css 样式

react-moveable and css modules - cant apply css styling

css

reactjs

css-modules

moveabletype