The reset css code appears to be overridden by the user agent stylesheet

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.

Answer â„–1

The default value for the font-family property is determined by the user agent, and form elements will initially inherit styles from the browser. For more information, refer to this answer: . To ensure consistency, it is recommended to include font-family: inherit; in your global CSS like so:

button,
input,
textarea,
select {
  font-family: inherit;
}

Alternatively, you can utilize a CSS reset such as:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sliding panels with Jquery

I've created some basic panels that slide in and out horizontally. My goal is to hide all content except the first panel when the page loads. When a link to other panels is clicked, the current content will slide left to be hidden and new content will ...

HTML steps for smooth scrolling to the top and bottom of a list

My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Belo ...

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

Arrow not appearing when hovering over navigation bar in Bootstrap 4

My navbar is not displaying the arrow even though I added class="dropdown-toggle" data-toggle="dropdown" from w3schools.com in my anchor tag. The hover effect works, but the arrow is still not showing. html file <div class="dropdown"> ...

How can I use CSS to change the background color of a fixed navbar when scrolling?

Is it possible to use only CSS to alter the background color of a fixed navbar once the user has scrolled past a specific point vertically? I am curious if this can be accomplished in CSS by targeting the ID of another element, or possibly its height? Alt ...

Is it necessary to incorporate express in a Next.js project?

I'm currently working on a website using Next.js. With Next.js, I have access to features like SSR and dynamic routing. Is it necessary for me to incorporate express into my project? If yes, what are the reasons behind needing to use it? What unique ...

Exploring the integration of RTK query data within the getStaticProps() function of Next.js (encountering an error)

I recently attempted to integrate RTK query into my Next.js project, but encountered an error when trying to use the fetched data in getStaticProps(): The error message states that the React Hook "useGetEventsQuery" is being called within a function name ...

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

Visibility of Tokens within Next.js

Are fetch request tokens in a next.js app visible to client-side users? I am currently working on an application that involves using the GitHub GraphQL API. I am considering implementing a fetch request with a bearer token, but I am uncertain about the se ...

flawless approach to showcasing visual content

I am a beginner in css. My goal is to showcase my images in an optimal way This is the HTML code I have: <div id="photos"> <h3>Title of the Photo</h3> <P class="like"><a href="#">Give it a Like</a& ...

Mastering the art of reading rows in ASP.NET using Java Script

Within the code snippet below, you'll find an image located in the second column. Clicking on this second column should allow me to access the data stored in the first column. Let's say we have a table with 10 rows. If the user clicks on the ico ...

Troubleshooting z-index conflict when using :before pseudo element to emphasize list entries

I am experiencing an issue with highlighting items in a list generated by JSTree using the :before pseudo element. The z-indexes seem to be causing some trouble, as adjusting them results in the highlighting appearing either behind all links or in front of ...

Tips for receiving notifications when the Collapsible collapses

I'm having trouble figuring out how to receive notifications when the Collapsible is expanded and collapsed. Currently, I am not receiving any type of notification. Any suggestions on how to make this work? Below is my code: --Imported jQuery < ...

Achieving perfect alignment of two images within a block and maintaining their center position even when resizing

While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved). As the page size decreases, I want the images to stack on top of e ...

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

Tailored vertical dimensions in Boostrap with varying width and height styles

Trying to position a vertical icon on a profile photo card inside a div to be in the center of a white box but it's not working. Using style="width: 300px; height: 300px; for the div square centers it horizontally, but not vertically. Can someone help ...

Bootstrap tab toggle feature

I'm currently facing an issue with Bootstrap's tab component. I need help figuring out how to hide a lorem ipsum section and show a hidden div when a specific tab is clicked, and then revert the changes when a different tab is selected. $(func ...

Retrieving information from the API and displaying it is a time-consuming process

navigation links import { v4 as uuid } from "uuid"; import Link from "next/link"; import { getAllCategories } from "src/utils/api"; export default async function NavLinks() { const {data: categories} = await getAllCategorie ...