Having trouble setting margin-bottom to 0 in react and antd - why won't it reset?

While practicing with React, I added 

<link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css" />
to the head of index.html in order to reset the styles. However, I noticed that <h1> still had a margin-bottom:0.5em that I couldn't reset. After checking in Chrome debugger, I found these styles as displayed below, even though I didn't write any styles in that section. It's puzzling where these inherited styles are coming from and how can I reset the margin-bottom to 0. (I'm using create-react-app and antd components in my exercise project.)https://i.sstatic.net/prRBW.png

htmlcssreactjsfrontendantd

Answer №1

Did you test incorporating * { margin: 0; } into your CSS stylesheet?

This will apply the * to affect every element.

Answer №2

If you're working with React, create a component that reflects the style you desire. For example, if you need an h1 tag without any bottom margin, follow these steps:

// customHeadingStyle.module.css
customHeadingStyle {
    margin-bottom: 0;
}

// CustomHeading.js
import styles from './customHeadingStyle.module.css';

// className for additional css classes
const CustomHeading = ({text, className}) => 
    <h1 className={`${styles.customHeadingStyle} ${className}`}>{text}</h1>

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

Step by step guide on customizing material-ui component styling

I need assistance in adjusting the width of SnackbarContent by overriding the root css API. How can I achieve this? <SnackbarContent className={classNames(classes[variant], classes.badge)} classes={{ root: { maxWidth: &apo ...

reactjsmaterial-uijss

Having trouble with downloading files in Express and React

I'm having trouble downloading a file from a folder to the browser. My initial code works fine and the file is downloaded immediately, but when I try to specify the file by ID it doesn't work. I'm not sure why? ///client works $.aja ...

node.jsajaxreactjsexpress

Customizing the CSS of the TinyMCE editor within a React application

Incorporating TinyMCE 5 into my React project has been an interesting challenge. I'm looking to personalize the editor by adjusting elements like borders and adding box shadows to the toolbar. Despite attempting to add CSS through the content_css prop ...

javascriptcssreactjstinymce-5

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

I have been struggling with aligning radio buttons to match the alignment of the form's text boxes. I've experimented with various solutions recommended on this site, as well as others and YouTube. However, the most helpful resource I found was: ...

htmlcssradio-buttonalignment

A guide on triggering actions when the location changes using react router v4

While using react-router-4.0.0-beta.4 in conjunction with redux, I am exploring the most effective approach to dispatch actions when a route changes. In previous versions, there was an API/event hook for this purpose (link: https://github.com/ReactTraini ...

reactjsreact-routerreact-redux

Using Webpack 4 and React Router, when trying to navigate to a sub path,

I'm currently working on setting up a router for my page, but I've encountered a problem. import * as React from 'react'; import {Route, Router, Switch, Redirect} from 'react-router-dom'; import { createBrowserHistory } from ...

reactjstypescriptwebpackreact-router

Place the menu within the image, positioned at the bottom

Could someone help me with placing a menu at the bottom of an image using HTML, CSS and Bootstrap 4? I have limited CSS knowledge and need assistance. Currently, my navbar is located below the image but not within it like this: I am looking to achieve so ...

htmlcssangularjsbootstrap-4

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

CSS: using syntax to target element by its unique identifier

Check out this guide: I followed the instructions and used an external stylesheet. I added #menu before each CSS item, for example: #menu ul{ font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none;} or: #menu ul li{ displ ...

css

Creating a paginated table with Nextjs, Prisma, and SWR: A step-by-step guide

I am attempting to set up a paginated table utilizing Nextjs, Prisma, and SWR. The table will display a list of invoices sorted by their ID. Here is an example of what it would look like: https://i.sstatic.net/WymoH.png To fetch all the data to the api r ...

javascriptreactjsnext.jsprismaswr

Created a custom function that includes a specific target href parameter

I have a website that implements role-based authentication, where the application displayed is dependent on the user's role. The code for this functionality is as follows: <asp:Repeater ID="ui_rprApp" runat="server" DataSourceID="odsApp"> ...

javascriptasp.netchtml

Update the color of the angular material input text box to stand out

Hey there, I'm currently using Angular Material and I want to change the color of the input focus when clicked. At the moment, it's displaying in purple by default, but I'd like it to be white instead. https://i.stack.imgur.com/vXTEv.png ...

htmlcssangularangular-materialmaterial-ui

Unable to locate the variable named StyleSheet

I've been delving into React Native using this informative site https://www.tutorialspoint.com/react_native/react_native_animations.htm However, I encountered a setback when attempting to launch the app on my iPhone. An error message indicates that a ...

javascriptreactjsreact-native

Adding a PDF generated from an HTML div to an email using Java

I am looking for a solution to convert the contents of an HTML div tag into a PDF file while preserving its associated CSS. This is essential as I will be using Java on the back-end to send emails, and I need to attach the PDF with the CSS intact when send ...

javascriptjavahtmlcssjakarta-mail

Creating a user interface to display different game options using Hooks (Developing an interactive rock-paper-scissors game)

I'm currently experimenting with React.js hooks while creating a new version of the classic game "Rock Paper Scissors." I'm facing an issue where the winner is not evaluated immediately after pressing the respective button. Below is a snippet of ...

javascriptreactjsreact-hooks

Unchecking random checkboxes within a div using jQuery after checking them all

Once a link is clicked on, all checkboxes within that particular div will be checked. function initSelectAll() { $("form").find("a.selectAll").click(function() { var cb = $(this).closest("div").find("input[type=checkbox]"); cb.not(":checked" ...

javascriptjqueryhtml

Keep the button in a single color unless it is being hovered over

Is there a way to create a button that changes color on hover, then reverts back to its original color after it's clicked? I'm facing an issue where my button initially has a red gradient, then changes color when hovered over, but turns white on ...

jqueryhtmlcsshoverfocus

Ensure that all panels are set to the same width as the widest panel

Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"? I want to show you the current look compa ...

htmlcssjquery-uijquery-ui-tabs

Troubleshooting a Netlify build error on a create-react-app website

Encountering: Build script returned a non-zero exit code: 1 After deploying my react js website code using Netlify, I received a build log along with the following error: 10:37:15 AM: Preparing to start the build 10:37:16 AM: Using build-image version: ...

reactjsnpmcreate-react-appnetlifyreact-scripts

Can a single div have three different border-bottom styles?

Can three border-bottom styles be applied to a single div element? This is the desired appearance: ...

css