I have a component which is a styled div which goes green on 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";
  }

`

This is shown in my component as:

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

When this is hovered i'd like my typography to go white. How would I do a &hover in typography without a style{{}}?

CodePudding user response：

There are two main options.

Option 1: Use the sx prop

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

This may be exactly what you are wanting to avoid when you mention "without a style{{}}", so another alternative is ...

Option 2: Target &:hover .MuiTypography-root within the ProjectAdd styles

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>
  );
}