如何在div上更改类时更改@emotion/style样式

import styled from '@emotion/styled';

const StyledDiv = styled.div`
  /* 在这里定义你的样式 */
`;

// 在组件中使用StyledDiv
const MyComponent = () => {
  return <StyledDiv>这是一个样式化的div</StyledDiv>;
};

const StyledDiv = styled.div`
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;

  &:hover {
    background-color: #e0e0e0;
  }

  @media (max-width: 768px) {
    font-size: 14px;
  }
`;

const MyComponent = () => {
  const [isRed, setIsRed] = useState(false);

  const handleClick = () => {
    setIsRed(!isRed);
  };

  return (
    <StyledDiv className={isRed ? 'red' : 'blue'}>
      这是一个样式化的div
      <button onClick={handleClick}>更改类</button>
    </StyledDiv>
  );
};

const StyledDiv = styled.div`
  background-color: ${props => (props.className === 'red' ? 'red' : 'blue')};
  padding: 10px;
  border-radius: 5px;

  &:hover {
    background-color: ${props => (props.className === 'red' ? 'darkred' : 'darkblue')};
  }

  @media (max-width: 768px) {
    font-size: ${props => (props.className === 'red' ? '14px' : '16px')};
  }
`;