使用Radium内联样式（JS模式）时<tr>hover效果不生效求助

这个问题我之前用Radium时也碰到过，咱们一步步排查解决：

1. 最关键的前提：组件必须被Radium高阶组件包裹 #

Radium要处理内联样式里的伪类（比如:hover），必须把你的表格组件用Radium()包裹起来，否则伪类规则根本不会被解析生效。

举个正确的包裹示例：

import Radium from 'radium';

// 你的表格组件
const YourTable = () => {
  // ...你的组件逻辑和代码
};

// 一定要用Radium包裹后导出
export default Radium(YourTable);

2. 检查的背景是否遮挡了的hover效果 #

如果你的<td>设置了默认背景色（比如白色），即使<tr>的hover背景变红，也会被<td>的背景盖住，看起来像是<tr>的hover没生效。

解决方法是给<td>的样式设置透明背景，或者让它继承父元素的背景：

const stylestd = {
  // 其他td样式
  backgroundColor: 'transparent', // 关键：让td不遮挡tr的背景
  // 或者如果需要td有默认背景，hover时继承tr的背景
  ':hover': {
    backgroundColor: 'inherit'
  }
};

3. 确认表格结构的正确性 #

<tr>必须放在正确的table容器内（比如<table>、<tbody>、<thead>），且父容器的display属性符合table规范（比如<tbody>默认是display: table-row-group）。如果用div模拟table结构但没设置对应display属性，也会导致<tr>的hover不生效。

完整的可运行示例 #

把上面的要点结合起来，你的代码应该改成这样：

import React from 'react';
import Radium from 'radium';

const TableComponent = () => {
  const styles = {
    row: {
      display: 'table-row',
      borderBottom: '1px solid #ddd',
      height: '20px',
      ':hover': {
        cursor: 'pointer',
        backgroundColor: 'red',
      },
    },
    stylestd: {
      padding: '8px',
      backgroundColor: 'transparent',
    },
    data: {
      // 你的span样式
    },
  };

  const click = () => {
    // 点击事件逻辑
  };

  return (
    <table>
      <tbody>
        <tr key={1} style={styles.row} onClick={click}>
          <td style={styles.stylestd}>
            <span style={styles.data}>asdc</span>
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default Radium(TableComponent);

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