在javascript中使用情绪/样式时出现服务器错误

import Link from "next/link";
import Image from "next/image";
import { Text, useColorModeValue } from "@chakra-ui/react";
import { styled } from "@emotion/styled"

const LogoBox = styled.span`
font-weight: bold;
font-size: 18px;
display: inline-flex;
align-items:center;
height: 30px;
line-height:20px;
padding:10px

&:hover img {
    transform:rotate(20deg);
}`


const Logo = () => {
    const dragonImg = `/images/dragon${useColorModeValue('', '-dark')}.png`
    return (
        <Link href="/">
            <a>
                <LogoBox>
                    <Image src={dragonImg} width={20} height={20} alt="logo" />
                    <Text 
                    color={useColorModeValue('gray.800', 'whiteAlpha.900')}
                    fontFamily="M PLUS Rounded 1c"
                    fontWeight={bold}
                    ml={3}> pokmon</Text>
                </LogoBox>
            </a>
        </Link>
    )
}



export default Logo;

在上面的代码中,我使用情感风格在span中添加风格,但是在运行网站时, 我是新手,不知道这里的问题是什么,谁能告诉我问题是什么,我如何解决它。

enter image description here