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

Question

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;

In the above code, I'm using emotion styled to add style in span, however when running the site, I'm newbie and don't know what the issue here is, can anyone please describe me what the issue is, and how can I solve it.

enter image description here

Answer 1

导入时不需要提取styled 。

import styled from "@emotion/styled"

Answer 2

Run your code, open your dev tools on chrome and go to console. It should give you a description of your issue and you should be able to solve it using google. On the other hand if you need help you should provide us with a clear issue and what you have tried to do to solve it.