The default black border on the Material UI Modal disappears upon inspection after rendering

Thank you for sharing your thoughts on this topic.

I am currently experimenting with the Material-UI Modal component. In the image below, you can see that there is always a black border displayed upon rendering. I have attempted to

  • remove it using custom useStyles and applying it to Paper, Modal, as well as the inner divs
  • use default CSS (border:0 etc) with Paper, Modal, etc.

https://i.sstatic.net/PDAUQ.png

Interestingly, when I click on the inspect tools or focus on the modal, the border disappears, leaving me with the desired style until it is re-rendered.

https://i.sstatic.net/ABulJ.png

Any suggestions or feedback would be greatly appreciated. I am new to Material UI and unsure of what I might be overlooking.

Thank you!

cssreactjsmaterial-ui

Answer №1

The borders have been customized in the browser, while a different border is defined in the paper.

const styles = makeStyles((theme) => ({
  document: {
    position: 'absolute',
    width: 400,
    backgroundColor: theme.palette.background.paper,
    outline: 0, // Disabling default browser focus borders
    //border: '2px solid #000',  // Removing default black css border
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

By implementing these modifications, I have successfully eliminated them from the example in sandbox.

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

Is there a way to ensure a div remains responsive when placed inside another responsive div, without relying on media queries?

I'm having trouble creating a responsive square div with another responsive div inside it. No matter what I try, I can't seem to get it right without using media queries. I must be missing something, but I can't figure out what it is. Here& ...

htmlcssbootstrap-4responsive

Using a CSS-animated DIV as a background with a transparent background DIV overlaid with content on top

In my attempt to overlay bootstrap/html/css on a CSS animated starfield background, I'm encountering some challenges. Online resources suggest using a 1x1 pixel png, but I am looking for a method to implement transparency through coding. Using backg ...

htmlcsstwitter-bootstrap

Is it possible for a Next.js client-side page to utilize a server-rendered component and dynamically transmit parameters to it?

Page.tsx "use client"; import CardList from "./CardList"; import { useState } from "react"; export default function Home() { const [offset, setOffset] = useState(0); const [limit, setLimit] = useState(0); function hand ...

reactjsnext.js

Is anyone else seeing a mysterious gray outline surrounding the image?

When visiting my website, I encountered an issue with the main menu. Specifically, when hovering over 'Populaire boeken', the first 2 menu items display properly with an image on mouseover. However, there seems to be a pesky grey border surroundi ...

jqueryhtmlcssborder

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

Looking to retrieve selections when the inputValue changes in react-select?

I'm working with a react-select component and I would like to implement a feature where an API request is triggered as soon as the user starts typing in the react-select field. This request should fetch items related to the keyword entered by the user ...

javascriptreactjsnext.jsreact-select

Is there a way to retrieve an environment variable while working within the public folder?

Within my create-react-app project, there is a javascript file located in the public folder. It is crucial for me to access an environment variable named REACT_APP_ACTUAL_ENV, but I am facing challenges as the usual method process.env.REACT_APP_ACTUAL_EN ...

reactjsenvironment-variablescreate-react-app

Stack the <td> elements vertically rather than reducing the width of each <td> cell

I am currently using a standard HTML table to showcase data pulled from an API. <table style="width:100%"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td&g ...

htmlcss

Is react-tap-event-plugin necessary for the date picker to function on the browser?

I'm encountering an issue with this code in my browser. While there are no exceptions being thrown... import React from 'react' import DatePicker from 'material-ui/DatePicker'; const Datetime = () => { return ( <div> ...

reactjsmaterial-designreduxreact-reduxmaterial-ui

fullcalendar adjusting color while being moved

Currently, I have implemented a fullcalendar feature that displays entries for multiple users with different colored calendars. However, there seems to be an issue when dragging an entry to another date - the color reverts back to default. Below is an exa ...

jquerycssjsonfullcalendar

What is the proper way to structure a React component class without any props?

When working with Typescript in a React project, the top level component typically does not receive any props. What is the recommended approach for typing this scenario? I have been using the following coding structure as a template, but I am curious if t ...

reactjstypescript

Having trouble getting Persistent Drawer to function properly with material-ui v5

Currently experimenting with the Persistent Drawer example from the official documentation here, but encountering issues during compilation. /Users/alex/Dev/wnav-react2/src/App.tsx TypeScript error in /Users/alex/Dev/wnav-react2/src/App.tsx(24,15): Propert ...

reactjsmaterial-ui

Adapting padding based on the height of the browser to ensure optimal layout

I'm interested in adjusting the padding value of a button element based on the height of the browser window, not its width. I want to make sure that the padding adjusts proportionally to the browser window's height. Is this achievable using CSS? ...

htmlcssbrowser

What is the best technique for positioning a div using the ELEMENT_NODE method?

　　#top { height: .5rem; padding-left: 2.7rem; line-height: .5rem; color: #666; font-size: .12rem; position: relative; background-color: rgb(241, 241, 241); } #top div { position: ...

htmlcss

Why isn't the POST operation functioning properly while all other CRUD operations are working?

After extensive testing with Postman, I found that all CRUD operations are functioning correctly, including POST. However, the issue arises when trying to make a POST request in the frontend app. Despite hours of debugging, I am still encountering errors. ...

reactjsnext.jsaxios

React-Bootstrap Popup encounters overlay failure

While using the Tooltip without an OverlayTrigger, I encountered the following error: webpack-internal:///133:33 Warning: Failed prop type: The prop overlay is marked as required in Tooltip, but its value is undefined. The code snippet causing the issu ...

javascriptreactjsreact-bootstrap

In a NextJS 13.4+ app router, the function is now running between 3 and 150 times instead of just once. This change occurs downstream of the useEffect hook, the getData fetch function,

The operation convertToUpperCase(item.name) is executed between 3 and 150 times. Below is its usage within the context: Within my test database, there is only one row of data being returned, so I anticipate it to run only once. // /app/Tacos/page.js &apos ...

reactjsnext.jsvercelnext.js13

Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below? I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on ho ...

htmlcss

Searching is disrupted when the page is refreshed in NextJS

When I refresh the page, router.query.title disappears. I have read that I need to use getServerSideProps, but I'm unsure of what to include in the function. Can anyone provide guidance on how to resolve this issue? Update: I followed Yilmaz's s ...

reactjstypescriptnext.jsquery-stringserver-side-rendering