MUI Typography hover样式设置：无需style{{}}实现hover时文字变白

我用styled-components定义了一个ProjectAdd组件，hover时背景会变绿，代码如下：

const ProjectAdd= styled.div`
  background-color: white;
  list-style-type: none;
  list-style: none;
  height: 100%;
  width: 10%;
  height: 100%;
  border-radius: .4em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 10px #7d7d7d99;
  box-shadow: 3px 5px 15px -4px #999999;
  

  transition: .5s all;

  &:hover{
    background-color: #00935f61;
    color: "white";
  }

`

组件在页面中的使用方式：

<ProjectAdd>
    <Typography fontSize=".85em" color="#009360">
        + Add
    </Typography>
</ProjectAdd>

我希望ProjectAdd被hover时，内部的Typography文字变为白色，要求不使用style={{}}内联样式，该怎么实现？

方法1：直接在父组件hover状态下控制子元素 #

利用styled-components的CSS嵌套特性，在ProjectAdd的:hover伪类里直接选中内部的Typography组件。如果是Material-UI的Typography，默认会生成span或div标签，直接用子元素选择器即可：

修改ProjectAdd的样式：

const ProjectAdd= styled.div`
  // 保留原有所有样式
  background-color: white;
  list-style-type: none;
  list-style: none;
  height: 100%;
  width: 10%;
  height: 100%;
  border-radius: .4em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 10px #7d7d7d99;
  box-shadow: 3px 5px 15px -4px #999999;
  

  transition: .5s all;

  &:hover{
    background-color: #00935f61;
    // 选中所有直接子元素，修改文字颜色
    & > * {
      color: white !important;
    }
    // 或者更精准，针对Typography生成的span标签：
    // & > span {
    //   color: white;
    // }
  }
`

如果Typography的color属性优先级较高，需要加!important来覆盖，不过更优雅的方式是用自定义的styled组件。

方法2：自定义StyledTypography，让父组件控制其hover样式 #

先把Typography封装成自定义的styled组件，然后在ProjectAdd里直接选中这个组件来修改hover状态下的颜色：

// 自定义StyledTypography，把原有样式移到这里
const StyledTypography = styled(Typography)`
  color: #009360;
  font-size: .85em;
`

// 修改ProjectAdd的hover逻辑
const ProjectAdd= styled.div`
  // 保留原有所有样式
  background-color: white;
  list-style-type: none;
  list-style: none;
  height: 100%;
  width: 10%;
  height: 100%;
  border-radius: .4em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 10px #7d7d7d99;
  box-shadow: 3px 5px 15px -4px #999999;
  

  transition: .5s all;

  &:hover{
    background-color: #00935f61;
    // 直接选中自定义的StyledTypography组件修改颜色
    ${StyledTypography} {
      color: white;
    }
  }
`

使用时替换原有的Typography：

<ProjectAdd>
    <StyledTypography>
        + Add
    </StyledTypography>
</ProjectAdd>

这种方式不需要!important，选择器优先级足够，而且样式都集中在styled-components中，更符合组件化开发的思路。

方法3：通过props传递hover状态（适合复杂场景） #

如果需要在hover时做更多逻辑处理，可以用React状态管理来传递hover状态：

import { useState } from 'react';

// 定义ProjectAdd组件
const ProjectAdd= styled.div`
  // 保留原有所有样式
  background-color: white;
  list-style-type: none;
  list-style: none;
  height: 100%;
  width: 10%;
  height: 100%;
  border-radius: .4em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 10px #7d7d7d99;
  box-shadow: 3px 5px 15px -4px #999999;
  

  transition: .5s all;

  &:hover{
    background-color: #00935f61;
  }
`

// 定义接受isHovered props的StyledTypography
const StyledTypography = styled(Typography)`
  color: ${props => props.isHovered ? 'white' : '#009360'};
  font-size: .85em;
`

// 封装一个带状态的组件
const ProjectAddWithHover = () => {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <ProjectAdd 
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <StyledTypography isHovered={isHovered}>
        + Add
      </StyledTypography>
    </ProjectAdd>
  )
}

这种方式适合需要在hover时触发额外逻辑的场景，但比前两种方法稍繁琐。

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