I've been developing a project using Next.js.
I attempted to reset the CSS in my _app.tsx file
and here is my _app.tsx code:
import type { AppProps } from 'next/app'
import GlobalStyles from '@/styles/GlobalStyles'
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<GlobalStyles />
<Component {...pageProps} />
</>
)
}
This is the code for my GlobalStyles component:
import { Global, css } from '@emotion/react'
import emotionReset from 'emotion-reset'
export default function GlobalStyles() {
return (
<Global
styles={css`
${emotionReset}
body {
align-items: center;
display: flex;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
'Helvetica', 'Arial', sans-serif;
height: 100vh;
justify-content: center;
margin: 0 auto;
width: 375px;
}
#__next {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding: 0 16px;
width: 100%;
}
`}
/>
)
}
Here is the folder structure of my project:
📦src
┣ 📂components
┃ ┗ 📂ui
┃ ┃ ┣ 📂button
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┗ 📜styled.tsx
┣ 📂pages
┃ ┣ 📂register.tsx
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📜_app.tsx
┃ ┣ 📜_document.tsx
┃ ┗ 📜index.tsx
┣ 📂styles
┃ ┗ 📜GlobalStyles.tsx
┗ 📂views
┃ ┗ 📂register
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styled.tsx
I attempted to test the CSS reset by rendering the button component on the register page,
but it didn't work as expected.
https://i.sstatic.net/guHjH.jpg
It seems like the user agent stylesheet for the button is overriding my reset CSS code.
I'm curious about what could be causing this issue in my code.