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

CodePudding user response：

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

import styled from "@emotion/styled"

CodePudding user response：

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.