文章/答案/技术大牛

发布

社区首页 >问答首页 >梅花字体-当文字徘徊时，文字是白色的。

问梅花字体-当文字徘徊时，文字是白色的。
EN

Stack Overflow用户

提问于 2022-08-17 13:20:10

回答 1查看 51关注 0票数 1

我有一个组件，它是一个样式为div的组件，在悬停时会变绿：

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>

当这个悬停时，我希望我的排版变成白色。在没有样式{{}的情况下，我将如何在排版中进行悬停？

css

reactjs

material-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-17 15:50:41

主要有两种选择。

选项1:使用sx支柱

    <ProjectAdd>
      <Typography
        fontSize=".85em"
        color="#009360"
        sx={{ "&:hover": { color: "white" } }}
      >
        + Add
      </Typography>
    </ProjectAdd>

当你提到“没有样式{{}}”时，这可能正是你想要避免的，所以另一个选择是.

选项2:目标&:hover .MuiTypography-root在ProjectAdd样式中

import styled from "@emotion/styled";
import Typography from "@mui/material/Typography";

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

  transition: 0.5s all;

  &:hover {
    background-color: #00935f61;
    color: white;
  }
  &:hover .MuiTypography-root {
    color: white;
  }
`;
export default function App() {
  return (
    <ProjectAdd>
      <Typography fontSize=".85em" color="#009360">
        + Add
      </Typography>
    </ProjectAdd>
  );
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73389219

复制

相似问题

问梅花字体-当文字徘徊时，文字是白色的。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问梅花字体-当文字徘徊时，文字是白色的。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问梅花字体-当文字徘徊时，文字是白色的。
EN