在React组件库中使用csstype的:hover伪类实现悬浮效果遇阻求助

为什么你的代码无法生效 #

• React的内联style属性不支持任何CSS伪类（包括:hover），不管用csstype定义了伪类结构，直接合并到style对象里也无法被浏览器解析。
• 你写的{DropdownText} + {DropdownTextHov}是错误的对象合并语法，正确写法是{...DropdownText, ...DropdownTextHov}，但即使修正语法，伪类部分依然无效——因为内联样式本身不支持伪类逻辑。

正确实现方式 #

方案1：CSS Modules（推荐，结合csstype类型提示）

先创建CSS模块文件Dropdown.module.css：

.dropdownText {
  place-self: start;
}
.dropdownText:hover {
  color: blue;
}

然后在组件中导入使用：

import CSS from "csstype";
import styles from './Dropdown.module.css';

export const DropdownContainer: CSS.Properties = {
  display: "grid",
  gridTemplateColumns: "3fr 15fr 30fr",
};

// 组件渲染部分
return (
  <div style={DropdownContainer}>
    <p style={DropdownText}></p>
    <p className={styles.dropdownText}>this is text</p>
  </div>
);

方案2：使用styled-components（原生支持伪类+类型提示）

通过styled-components可以直接在JSX中编写包含伪类的样式，csstype的类型会自动生效：

import styled from 'styled-components';

const DropdownContainer = styled.div`
  display: grid;
  grid-template-columns: 3fr 15fr 30fr;
`;

const DropdownText = styled.p`
  place-self: start;
  &:hover {
    color: blue;
  }
`;

// 组件渲染部分
return (
  <DropdownContainer>
    <DropdownText></DropdownText>
    <DropdownText>this is text</DropdownText>
  </DropdownContainer>
);

方案3：纯内联样式（通过React事件模拟hover）

如果必须用内联样式，可以通过鼠标事件切换状态来模拟hover效果：

import { useState } from 'react';
import CSS from "csstype";

export const DropdownContainer: CSS.Properties = {
  display: "grid",
  gridTemplateColumns: "3fr 15fr 30fr",
};

export const DropdownText: CSS.Properties = {
  placeSelf: 'start',
};

export const DropdownTextHover: CSS.Properties = {
  color: 'blue',
};

// 组件内部状态
const [isHovered, setIsHovered] = useState(false);

// 组件渲染部分
return (
  <div style={DropdownContainer}>
    <p style={DropdownText}></p>
    <p 
      style={{...DropdownText, ...(isHovered ? DropdownTextHover : {})}}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >this is text</p>
  </div>
);

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