如何用内联样式让父div及子元素均生效cursor-pointer？

你现在的问题核心是用了className="cursor-pointer"但没法用外部样式表，所以这个类完全没起作用；另外就算生效了，部分子元素（比如checkbox）自带的光标样式也会阻断继承，导致只有空白区域能触发指针光标。给你几个不用挨个给子元素加样式的方案：

方案1：直接给div加内联样式，强制子元素继承 #

给div设置内联cursor: pointer，同时给子元素加cursor: inherit——虽然要给子元素加属性，但只需要加一次样式声明，比单独加cursor-pointer清爽，也能适配你的条件逻辑：

<div style={{ cursor: 'pointer' }}>
  <input type="checkbox" style={{ cursor: 'inherit' }} />
  <label style={{ cursor: 'inherit' }}>选项文本</label>
</div>

方案2：用伪元素覆盖整个div（最省心） #

如果不想碰子元素，就给div加一个全屏的绝对定位伪元素，让它覆盖整个div区域，这样不管点到div的哪个部分（包括子元素上方）都会触发指针光标。注意要给子元素设置更高的z-index，保证它们能正常交互：

<div style={{ position: 'relative', cursor: 'pointer' }}>
  <input type="checkbox" style={{ position: 'relative', zIndex: 2 }} />
  <label style={{ position: 'relative', zIndex: 2 }}>选项文本</label>
  {/* 覆盖整个div的占位元素 */}
  <div style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    cursor: 'pointer',
    zIndex: 1
  }}></div>
</div>

方案3：利用CSS变量（部分场景适用） #

给div定义一个CSS变量，然后让所有子元素继承这个变量的光标值，不过内联样式里的通配符选择器不是所有浏览器都支持，谨慎使用：

<div style={{
  cursor: 'pointer',
  '--cursor': 'pointer',
  '*': { cursor: 'var(--cursor)' }
}}>
  <input type="checkbox" />
  <label>选项文本</label>
</div>

重点提醒 #

• 别再用className="cursor-pointer"了，你没法用外部样式表，这个类完全无效，必须用内联style属性。
• 表单元素（比如checkbox、radio）默认有自己的光标样式，会阻断父元素的光标继承，这就是你之前只有空白区域生效的核心原因。

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