React中如何根据mode值动态切换CSS Module的光标样式？

这里有几种简单直接的实现方式，根据你的场景选择即可：

1. CSS类切换（推荐方案） #

这种方式遵循样式与逻辑分离的原则，维护性最好。

步骤： #

• 在CSS模块中添加额外类，定义mode=1时的悬停光标样式
• 在组件中根据mode的值动态给canvas添加/移除这个类

修正后的组件代码：

import { useState } from 'react';
import styles from '../css/basic-styles.module.css';

const ImagePreview = () => {
    const [mode, setMode] = useState(0);

    const changeMode = (newMode) => {
       setMode(newMode);
    };

    return (
        <canvas 
            className={`${styles.canvas} ${mode === 1 ? styles.pointerCursor : ''}`} 
            width={200} 
            height={200}
        ></canvas>
    );
};

CSS代码：

.canvas:hover {
  cursor: crosshair;
}

/* mode为1时生效的悬停样式 */
.canvas.pointerCursor:hover {
  cursor: pointer;
}

2. 内联样式结合事件监听 #

如果场景简单，可直接通过React事件监听和内联样式实现，无需修改CSS。

组件代码：

import { useState } from 'react';
import styles from '../css/basic-styles.module.css';

const ImagePreview = () => {
    const [mode, setMode] = useState(0);
    const [isHovered, setIsHovered] = useState(false);

    const changeMode = (newMode) => {
       setMode(newMode);
    };

    return (
        <canvas 
            className={styles.canvas} 
            width={200} 
            height={200}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            style={{ 
                cursor: isHovered ? (mode === 1 ? 'pointer' : 'crosshair') : 'default' 
            }}
        ></canvas>
    );
};

3. CSS变量动态赋值 #

适合需要动态调整多个样式属性的场景，灵活性强。

组件代码：

import { useState } from 'react';
import styles from '../css/basic-styles.module.css';

const ImagePreview = () => {
    const [mode, setMode] = useState(0);

    const changeMode = (newMode) => {
       setMode(newMode);
    };

    return (
        <canvas 
            className={styles.canvas} 
            width={200} 
            height={200}
            style={{ '--hover-cursor': mode === 1 ? 'pointer' : 'crosshair' }}
        ></canvas>
    );
};

CSS代码：

.canvas:hover {
  /* 用CSS变量赋值，fallback值为crosshair */
  cursor: var(--hover-cursor, crosshair);
}

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