The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to remove it? See screenshot below for reference - notice the blue edge at the bottom (this occurs all around if the element is resized).

Interestingly, clicking on content within the Drawer such as a List element makes the shadow disappear. I suspect it has something to do with the component behaving like a modal?

<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
    <div className={classes.dummy}>
    </div>
</Drawer>

Note: The floatingMenu class simply adds a 55px margin at the top (equal to the height of the AppBar), no other styles are applied.

https://i.sstatic.net/6HRYp.png

htmlcssreactjsmaterial-uiz-index

Answer №1

It may seem a bit complex, but it's definitely feasible with just a few adjustments in terms of props and styling. The element that is darkening the background of the UI is actually the Backdrop within the Modal component. When the Drawer is set to temporary mode, it utilizes the Modal. The visibility of the shade can be controlled by the hideBackdrop prop of the Modal, which can also be passed directly to the Drawer.

However, the Modal itself will still cover the entire viewport until the Drawer is closed, making other parts of the UI unclickable. While there may not be a simpler solution, you can make the Modal element "click-through" by setting its pointer-events to none using CSS styling. To re-enable clicks on the drawer, just revert its pointer-events to all.

For example, you could achieve this with inline styles using the style prop:

<Drawer hideBackdrop style={{ pointerEvents: 'none' }}>
  <div style={{ pointerEvents: 'all' }}>
    I'm a sidebar!
  </div>
</Drawer>

Here's a live example for reference.

If you want to customize Material UI's styles further, you can apply the pointer-events rule to the Paper within the Drawer through the classes prop.

Answer №2

After delving deeper into the documentation, I found a simpler solution to resolve the issue at hand. The Modal component's page mentions:

Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.

Instead of making changes to the main component or its inner components as initially thought, I opted to add an additional CSS class outline: 0 to the existing floatingMenu (which is already included in the PaperProps):

floatingMenu: {
    marginTop: '55px',
    outline: 0
}

Implementing this adjustment successfully resolved the issue, eliminating the appearance of the unwanted blue shadow border.

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

Tips for transferring an element from different components to a designated component in React.js

In my project, I have a <Header> component and another component called <AboutMe>. My goal is to select an element by its ID from the <AboutMe> component and attach an event listener for onClick. However, whenever I attempt to use getEl ...

javascripthtmlreactjs

Struggling to eliminate the unseen padding or white space preventing the text from wrapping under the button

Just starting out with html and css and could use some assistance with a small issue I've come across. While redesigning a website, I have a three-button form (Donate, Find, Subscribe). I'm trying to get the paragraph underneath the Donate and Fi ...

htmlcssformsbuttonwhitespace

Which is the preferable option for creating a circular daily planner: canvas or SVG?

As a novice programmer delving into the world of coding (or at least hoping to), I have a question regarding graphic tools in html5 for my latest project. My goal is to create a planner app using electron, with the unique twist that the planner form sho ...

javascripthtmlcanvassvgelectron

Issues are arising with CSS .not(selector) functionality when applied to a span element

One of the challenges I'm facing is formatting a header with a span tag that contains a date and some accompanying text. The goal is to make the text bold without affecting the formatting of the date. In my CSS file, I have tried using :not(cls) to t ...

htmlcss

Receiving an error in Typescript when passing an object dynamically to a React component

Encountering a typescript error while attempting to pass dynamic values to a React component: Error message: Property 'title' does not exist on type 'string'.ts(2339) import { useTranslation } from "react-i18next"; import ...

reactjstypescriptnext.js

data not populating in datagrid upon first load

I'm facing an issue where the data I'm trying to fetch using an API is not initially loading in my datagrid. I can retrieve the data successfully, but for some reason, it doesn't show up in the datagrid. The setup involves a common function ...

javascriptreactjsmaterial-uimui-datatable

Converting hierarchical JSON data into a table with rowspan using Angular

I am facing a challenge in creating a table using nested JSON obtained from an API. I am unsure how to dynamically merge cells when needed, especially since the JSON structure can be nested up to 6 or 7 levels. Desired Table : Expected Table Current Ou ...

javascripthtmlangular

"Enhancing HTML table rows using jQuery for a dynamic user experience

I'm currently using a jQuery script to determine the number of rows in a table and then display that count within a <td> tag. <tr> <td id = "jquery"> </td> <td> <%= f.text_field :data1 %> </td> <td ...

jqueryhtmlruby-on-rails

Creating functions within the $scope that do not directly access the $scope object

tag, I am looking to create a $scope function that specifically manipulates the variables it receives. To test this functionality, I have set up a Plunker available at http://plnkr.co/edit/BCo9aH?p=preview. In my setup, there is an ng-repeat loop that lis ...

javascripthtmlarraysangularjsangularjs-scope

What techniques are most effective for concealing a div container through css?

I attempted to hide the #div element using CSS: #div{ display: hide; } However, the method did not work as expected. ...

css

Include a back button during the loading of a URL in an Electron application

Within my Electron application, I have implemented elements that, upon clicking, redirect to a URL. However, navigating back to the previous (local) page is not currently achievable. Is there a feasible method to incorporate a layered back button on top o ...

javascripthtmlcssnode.jselectron

Having trouble adjusting the radio group value when selecting in a React component

I'm facing an issue with a React component where I have a textbox and eight radio buttons as input. The component uses useState to manage value changes in real-time. However, no matter which radio button I select, the returned value always stays as "a ...

reactjsreact-hooks

"Error: Unable to locate module" encountered during the transition to Webpack 5

I am in the process of upgrading my React application to webpack version 5.72.0 (previously on 4.42.1). As part of this update, I have also upgraded webpack-cli to version 4.9.2, webpack-dev-server to version 4.8.1, and babel to version 7.17.9. However, I ...

javascriptreactjswebpackbackbone.jsbabeljs

Changes to the state will not be reflected until a poll is conducted

Here we have an example of state being initialized and passed down to a child component: const [rowCount, setRowCount] = React.useState<number>(1); <Foo setRowCount={setRowCount} /> Foo: const Foo = (props) => { const { setRowCount } ...

javascriptreactjs

Unable to locate the specified script using node.js

Recently, I've started working with Javascript and Node.js. My current project is utilizing OpenMCT (https://github.com/nasa/openmct) and I'm facing an issue when trying to integrate a script as a plugin in an index.html file. Upon starting the N ...

javascripthtmlnode.jswebpack

position blocks next to each other within a container

Thank you for all the hard work! I've been struggling to figure out how to align blocks next to each other within a div. It may not be that difficult, but I just can't seem to find an elegant solution... Here is the HTML code snippet: <div ...

javascripthtmlcss

What is the best way to connect an external CSS file to an HTML file in Pycharm?

Within the project directory, I've placed both the HTML and CSS files in the 'venv' library root folder. The HTML file is named index.html The CSS file is named styles.css This is the code snippet I used to link the CSS: <link rel=" ...

pythonhtmlcsspycharm

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

I have been working on a travel website and incorporated a bootstrap tab feature. In the first tab, I have some content, while in the second tab, I've added a full calendar with JavaScript. Everything seems to be functioning correctly when the full ca ...

javascriptjqueryhtmlcssfullcalendar

I am experiencing an issue where the CSS file is not being loaded in my HTML file while using the Netbeans IDE

I am a beginner in HTML and CSS and I have been trying to link my CSS file to my HTML code after reading various solutions on Stack Overflow. Unfortunately, I am facing difficulty as the CSS file is not loading in my HTML code. If anyone can offer assistan ...

htmlcss

The integration of <form> with jQuery Ajax error

I have come across this HTML form function FormSubmit (){ $.ajax({ url:'dotar.php', type:'post', data:$('form').serialize(), success:function(){ setTi ...

javascriptjqueryhtmlajax