I'm trying to style a function using tailwind-styled-components and it keeps throwing the error that the function has already been defined. Since I'm using NextJS for this, I am declaring a function that renders my logo in an index file in the assets folder.
import Image from next/image
export const Logo = () => {
return <Image src={logo} alt='Logo' />
}
What I would like is to style the logo in different ways when rendering it on different pages. This applies more to the dimensions of the image and probably opacity. This is what I'm doing to style it
const Logo = tw.img`
h-28
`
This approach throws the error "Parsing error: Identifier 'UberLogo' has already been declared." How can I fix this?
you are going to want to pass the function into parentheses like this
const StyledLogo = tw(Logo)`
h-28
`
after doing so StyledLogo will be a styled constant of Logo() that can be used just like the original function, just styled.