如何用MUI和TypeScript同步触发Typography与StyledTextField的悬浮效果

你遇到的问题核心是容器hover时要同时触发子元素的样式变化，不能只给单个元素加hover，得在容器的样式里通过后代选择器控制子元素。下面给你具体的实现方案：

核心思路 #

用MUI的Box作为容器（也可以用普通div，但Box更适配MUI的样式系统），在容器的sx属性中，通过:hover结合后代选择器，指定容器hover时子元素（Typography、StyledTextField）的样式变化。

完整代码示例 #

import { Box, Typography, TextField } from '@mui/material';
// 假设你的StyledTextField是自定义的（比如用styled创建）
// const StyledTextField = styled(TextField)({ /* 自定义样式 */ });

export default function FormItem() {
  return (
    <Box 
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        padding: '8px',
        // 容器hover时触发子元素样式变更
        '&:hover': {
          // 可选：给容器加hover背景增强反馈
          backgroundColor: '#f0f0f0',
        },
        // 通过id控制Typography的hover颜色
        '&:hover #first_text': {
          color: '#252525',
        },
        // 控制StyledTextField的输入框样式（以Outlined类型为例）
        '&:hover .MuiOutlinedInput-root': {
          '& fieldset': {
            borderColor: '#252525',
          },
          // 可选：hover时改变输入框文字颜色
          '& input': {
            color: '#252525',
          },
        },
      }}
    >
      <Typography 
        id="first_text"
        sx={{
          fontWeight: 'regular',
          fontSize: '18px',
          marginTop: '-4px',
          marginLeft: '8px',
          color: '#888',
          // 删掉原来单独的&:hover，交给容器统一控制
        }}
      >
        First Name*
      </Typography>
      <StyledTextField 
        variant="outlined"
        placeholder="Enter your name"
        // 其他属性配置
      />
    </Box>
  );
}

关键说明 #

1. 选择器精准性：
   • 用Typography的id="first_text"作为选择器，精准定位该文本元素
   • StyledTextField本质是MUI的TextField，可通过浏览器开发者工具查看元素自带的类名（比如MuiOutlinedInput-root）来控制样式；如果是自定义了类名，直接替换成自定义类名即可
2. 统一hover逻辑：移除Typography原来单独的&:hover样式，避免和容器的hover逻辑冲突
3. 灵活调整：如果不需要容器的hover背景，直接删掉对应的样式块即可

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