Having trouble adjusting the width of a Material-UI modal in React?

I'm having trouble adjusting the width of the dialog box to show all of the content without adding a horizontal scroll bar. I noticed that the blur effect is applied to most of the page, so why isn't the form extending with it? Any assistance on this issue would be greatly appreciated!

Below is my CSS code:

infoModal: {
    backdropFilter: "blur(3px)",
    width: "90%"
  },
  modalBody: {
    width: 1000,
    display: 'flex', 
    flexDirection: 'column',
  },


<Dialog onClose={handleClose} open={open} className={classes.infoModal} fullWidth>
        <DialogContent className={classes.modalBody}>
</Dialog>
</DialogContent>
cssreactjsmaterial-ui

Answer №1

If you want to customize the appearance of the dialog box in your website, you'll need to override the CSS rule names classes (refer to its API page at https://material-ui.com/api/dialog/).

Remember to pass the classes created to the classes props instead of using className.


const useDialogStyles = makeStyles({
    paper: {
        width: '800px'
    }
});

export function Component() {

    const dialogClasses = useDialogStyles();

    return (
        <Dialog classes={dialogClasses} open={true}>

        </Dialog>
    );
}

For testing purposes, check out this sandbox: https://codesandbox.io/s/change-dialog-width-vux95

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 on resetting the position of a div after filtering out N other divs

Check out this code snippet. HTML Code: X.html <input type="text" id="search-criteria"/> <input type="button" id="search" value="search"/> <div class="col-sm-3"> <div class="misc"> <div class="box box-info"> ...

javascriptjqueryhtmlcss

Is it feasible to customize the appearance of output text to resemble that of a password input field in Rich Faces?

Within our dataTable, we have a collection of attributes. Included in these are outputtext fields that contain passwords. Typically, password fields display as a series of black bullets if they are input fields (inputSecret). Currently, the outputText fi ...

cssrichfaces

Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?

I am trying to work with a div element <body style="width: 100vw; height: 100vh"> <div id="containerDiv"> <div id="canvasDiv" /> </div> </body> My goal is to adjust the width of canvasDiv based on the screen size. ...

htmlcssbootstrap-4bootstrap-5

What are the steps to implementing React in this particular situation?

In my Django application, there is a view that presents booking data for all theaters on a specific date. Once the data is loaded, an authorized user can carry out tasks such as assigning coordinators or changing timings using ajax (jquery) and updating ...

javascriptjqueryarchitecturereactjs

Tips for positioning a div element at the center in ASP.NET

I have written the following code snippet: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...

htmlcss

Creating a two-column post loop in Wordpress is a great way to display content in a

I've been attempting to separate posts for a long time without success. No matter what variations I try, the result is always either a single post or duplicating all of them. In other words, multiple posts are not displaying as intended. If anyone ha ...

phpcsswordpress

I am facing an issue where the weather information is not being displayed even after sending a request to

I'm working on building an app that will provide users with weather data once they input a city. Utilizing the openweathermap.org API for this purpose, I've noticed in my console under networks that an API call is made when the city is entered, b ...

htmlcssreactjs

Troubleshooting: Jquery show effects not functioning as expected

Currently, I am facing an issue where I am attempting to display a fixed div using the show function of jQuery. Although the show function itself is working properly, when I try to include an effect from jQuery UI, it does not seem to work as expected. Bot ...

javascriptjqueryhtmlcss

Is it possible to enable table scrolling within Semantic-UI-React by utilizing Next.js?

My issue involves a wide table in the Grid component with a width of 16 on mobile resulting in strange behavior. If you view my work in progress at the following URL, you'll notice that every component is responsive on mobile except for the stretched ...

cssreactjsresponsive-designsemantic-uisemantic-ui-react

What is the best way to add attractive share buttons for Facebook, Twitter, and G+ on your

I am looking to enhance my social media share buttons on my website, similar to the ones found on YouTube: Currently, I have default buttons that are not visually appealing: <a name="fb_share" type="icon" share_url="<?php the_permalink(); ?>"> ...

htmlcssfacebooktwittergoogle-plus

How to centrally position an image within a div using Bootstrap

I am a fan of using bootstrap and I recently encountered an issue with applying max-width to an image. It seems that when I do this, the image does not center properly despite using text-center. The solution I found was simply removing the max-width to ...

htmlcssimagetwitter-bootstrapdisplay

react componentdidupdate triggers never-ending iteration

When I trigger an API call to elasticsearch using onChange, it prompts a list for autocomplete. To make sure that my store is updated before rerendering, I included componentDidMount so that I am not lagging behind by one tick. Here is the code snippet: c ...

javascriptreactjsinfinite-loop

What is the best way to choose a specific row with Enzyme?

We have chosen Jest for doing UI Test-Driven Development on our React application. Our component rendering structure looks like this: <Div> <Row> </Row> <ROW> <Row> <ROW> <Link> <Link> ...

javascriptreactjsecmascript-6enzymejestjs

Trigger an event when the menu is outside the viewport and then lock the menu to the top of the viewport

I am trying to create a menu element that remains fixed at the top of the browser viewport as the user scrolls, ensuring it is always visible. In my webpage layout, the menu sits below some text in the header initially. Once the user scrolls past the heade ...

javascriptjqueryhtmlcss

Tips for customizing the transparency of a Bootstrap dropdown menu

I'm currently working with .navbar-default { z-index:99; opacity:0.8; } However, I am looking to adjust the opacity of dropdown menu items to 0.9. I have attempted several solutions without success. Here are a few examples: .dropdown-menu>li> ...

csstwitter-bootstrapmenutransparencyopacity

What are some ways to keep the text within the boundaries of the input box?

How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...

javascripthtmlcss

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Can you explain why Firefox is cutting off circular png images at the bottom of this page: It's strange that IE 10 and Chrome don't have this issue with cropping the images. ...

cssimagefirefoxbrowsercross-browser

There was a problem: undefined is not a valid iterable! @ multi main

After completing updates on some packages, my code compilation is failing. Unfortunately, the error message isn't providing much insight. I am struggling to locate the source of the error. I've attempted removing various elements, but the error ...

reactjsnpmwebpackbabeljs

Tips for updating the color of buttons after they have been selected, along with a question regarding input

I need help with a code that changes the color of selected buttons on each line. Each line should have only one selected button, and I also want to add an input button using AngularJS ng-click. I am using AngularJS for summarizing the buttons at the end ...

javascripthtmlcssbuttonangularjs-ng-click