server error while using emotion/styled in 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

You don't need to extract styled when importing it.

import styled from "@emotion/styled"