如何为单个div设置光标类型？React/MUI中如何将指针光标改为not-allowed？

一、给每个div单独设置不同光标类型 #

这事儿其实很简单，核心就是靠CSS的cursor属性，常用的实现方式有两种：

• 类选择器批量定义：先在CSS里写好对应不同光标样式的类，再给目标div加上对应的类名就行，适合需要重复使用的场景：

/* 提前定义各类光标样式 */
.cursor-pointer {
  cursor: pointer; /* 手型光标 */
}
.cursor-not-allowed {
  cursor: not-allowed; /* 禁止符号光标 */
}
.cursor-text {
  cursor: text; /* 文本输入光标 */
}
.cursor-move {
  cursor: move; /* 移动拖拽光标 */
}

然后在HTML中给div分配类：

<div class="cursor-pointer">鼠标 hover 我会变成手型</div>
<div class="cursor-not-allowed">我是禁止交互的光标</div>
<div class="cursor-text">我看起来像输入框的光标</div>

• 行内样式快速设置：如果只是个别div需要特殊光标，直接写行内样式更省事：

<div style="cursor: crosshair;">我是十字光标</div>
<div style="cursor: help;">我是带问号的帮助光标</div>

二、ReactJS或Material UI中修改光标为"not-allowed" #

完全可以实现！分两种场景给你讲清楚：

1. React中的普通div

React里的div和原生HTML用法几乎一致，两种常用方式：

• 行内样式（最直接）：

<div style={{ cursor: 'not-allowed' }}>这个div的光标是禁止符号</div>

• CSS模块方式：适合大型项目的样式隔离，先在.module.css文件里定义类：

/* styles.module.css */
.notAllowedCursor {
  cursor: not-allowed;
}

再在组件中导入使用：

import styles from './styles.module.css';

function MyComponent() {
  return <div className={styles.notAllowedCursor}>禁用状态的div</div>;
}

2. Material UI组件（比如GridList、Box等）

MUI提供了几种灵活的样式设置方式：

• 使用sx属性（MUI官方推荐）：这是MUI内置的行内样式方案，直接在组件上配置：

import GridList from '@mui/material/GridList';
import Box from '@mui/material/Box';

function MyMUIComponent() {
  return (
    <>
      <GridList sx={{ cursor: 'not-allowed' }}>
        {/* GridList的内容 */}
      </GridList>
      <Box sx={{ cursor: 'not-allowed', marginTop: 2 }}>
        这个Box的光标是禁止符号
      </Box>
    </>
  );
}

• 自定义类名：和React普通div逻辑一致，定义CSS类后给MUI组件加className属性：

import GridList from '@mui/material/GridList';
import './styles.css';

function MyComponent() {
  return <GridList className="not-allowed-cursor">...</GridList>;
}

/* styles.css */
.not-allowed-cursor {
  cursor: not-allowed;
}

• styled-components定制：如果你用styled-components封装MUI组件，可以直接在样式里设置：

import styled from 'styled-components';
import GridList from '@mui/material/GridList';

const DisabledGridList = styled(GridList)`
  cursor: not-allowed;
`;

function MyComponent() {
  return <DisabledGridList>...</DisabledGridList>;
}

额外提一句：如果是MUI的Button这类自带disabled属性的组件，开启禁用后会自动应用not-allowed光标，但像GridList这种容器组件没有默认禁用样式，就需要手动设置啦。

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