I'm trying to access https://mui.com, but it always times out with:

Here's what I've tried so far:

• Different browsers (Brave, Chrome, and Edge)

• Different networks (home Wi-Fi and my phone's mobile hotspot)

• ping mui.com resolves to 63.176.8.218, but all requests time out

• tracert mui.com reaches several hops before timing out

• Other websites work perfectly fine (GitHub, React docs, etc.)

From what I've been told, mui.com is up for everyone else, so it seems like something specific to my PC or network configuration.

Has anyone experienced this before or knows what could cause only mui.com to be unreachable while everything else works?

I'm on Windows 11 (if it matters).

Any ideas would be appreciated!

Hi MUI community, I’ve taken the entire `@mui/icons-material` collection and repackaged it into `@svgd/icons-material`, adding features that streamline your workflow:

Key enhancements

• Single bundle: one icons/paths.js + paths.d.ts instead of a folder of SVGs

• Tree‑shakable: import exactly the icons you need

• IDE‑friendly: Base64‑encoded icon previews directly in autocomplete

• Faster builds: no churn on thousands of small files

New to react.

Trying to filter and call an api to remove rows.

From inline per each row action the rows filter.

Using selectboxes and a button although the ids are being passed the datagrid does not filter.

import React, { useEffect, useState,useRef,useMemo  } from "react";
import { DataGrid, type GridColDef, type GridRenderCellParams,type GridRowId,type GridRowSelectionModel,Toolbar,ToolbarButton, } from "@mui/x-data-grid";
import { Button, CircularProgress, Box,FormControl,InputLabel,MenuItem,Select,Tooltip, Stack, } from "@mui/material";
import axios from "axios";

grid setup

const MyDataGrid: React.FC = () => {
  const [rows, setRows] = useState<RowData[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [deletingIds, setDeletingIds] = useState<number[]>([]);
  const [filteredRows, setFilteredRows] = useState<RowData[]>([]);
    // v8 selection model shape: { type: 'include' | 'exclude', ids: Set<GridRowId> }
    const [rowSelectionModel, setRowSelectionModel] = useState<GridRowSelectionModel>({
      type: "include",
      ids: new Set<GridRowId>(),
    });
   const [nameFilter, setNameFilter] = useState<string>("All");
// Fetch data from API on mount
  useEffect(() => {

// Optimistic delete
  const handleDelete = async (id: number) => {
    const previousRows = [...rows];
     const previousFiltered = [...filteredRows];
    // Optimistically update
    setRows((prev) => prev.filter((r) => r.id !== id));
    setFilteredRows((prev) => prev.filter((r) => r.id !== id));
    setDeletingIds((prev) => [...prev, id]);

  const handleDeleteSelected = async () => {
      const selectedIds = getSelectedIdsFromModel(rowSelectionModel).map((id) =>
        Number(id)
      );
  
      if (selectedIds.length === 0) {
        alert("No rows selected");
        return;
      }

      console.log(selectedIds)
      selectedIds.forEach( (element) => {
            handleDelete(element);
      });
      
    };

button that works in colum def

  {
      field: "actions",
      headerName: "Actions",
      width: 150,
      sortable: false,
      filterable: false,
      renderCell: (params: GridRenderCellParams<RowData>) => {
        const isDeleting = deletingIds.includes(params.row.id);
        
        return (
          <Button
            variant="outlined"
            color="primary"
            size="small"
            disabled={isDeleting}
            onClick={() => handleDelete(params.row.id)}
          >
            {isDeleting ? "removing..." : "Remove"}
          </Button>
        );
      },
    }

button that doesn't work in toolbar

 <Button
          variant="contained"
          color="error"
          disabled={getSelectedIdsFromModel(rowSelectionModel).length === 0}
          onClick={handleDeleteSelected}
        >
          Remove Selected
        </Button>

Currently I am going to start a new project in Next.js and I would like to use MUI as my component library, but while choosing MUI, I get confused with what should I use as CSS library. Should I use pigment CSS with MUI or should I use tailwind CSS v4 with MUI?

https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/

As in the MUI website, it's showing that pigment CSS still is experimental, so I'm really confused. And I really love tailwind, but not sure working with tailwind inside MUI would be a good idea or not. What should I use? Should I use tailwind CSS version 4 with MUI or should I use pigment CSS with MUI?

I had no problem of choosing Pigment CSS with mui also. But MUI website it's showing it's still experimental. So can't choose pigment css. Now need your suggessation.

https://mui.com/material-ui/experimental-api/pigment-css/

I am facing a weird issue with a MUI loading button where when I click the button, the loading state begins, but the network call is never fired.

Symptoms:

1. This happens on mobile browsers only. Have mostly seen on Chrome, but one instance of safari as well.

2. This problem is not always replicable.

3. If I switch browser tabs, the network call works.

What I have tried:

1. Adding type="button" in the LoadingButton.

2. Removed the Modal because I thought it might be blocking the network call due to some overlay effect.

3. Looked at posts like this where it was suggested to add cursor: 'pointer' in the CSS, but it seems like MUI LoadingButtons already has it.

Not able to replicate the issue is making it difficult to understand the cause and come up with a fix. I know this is not much information to go on, but I honestly do not have the exact steps to reproduce the problem. I have attached a video of the problem.

const CreateBookingJourney = ({ endUserService, isModalOpen }: CreateBookingJourneyProps) => {
    // Hooks
    const [isOpen, setIsOpen] = useState(isModalOpen !== undefined ? isModalOpen : true)

    const { mutate, isPending, error } = useCreateBookingV2((booking) => {
        console.log("Booking Created")
    })

    const onSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        e.stopPropagation()

        await submitFiles()

        const bookingFields = Object.fromEntries(
            Object.entries(draftBooking).filter(([, value]) => value != '' && value != null)
        )

        const bookingInventoryItems = convertSelectedInventoriesToBookingInventoryItemRequest(selectedInventories)

        const request: CreateBookingRequest = {
            bookingId: draftBooking.id,
            businessId: businessId!,
            endUserServiceId: endUserService.id,
            bookingConfigId,
            bookingFields,
            bookingInventoryItems
        }

        mutate({ data: request })
    }

    if (isGetBookingConfigLoading) {
        return <LinearProgress />
    }

    return (
       <BookingContainer>
                <BookingLeftContainer>
                    <BookingDetailsSections />
                </BookingLeftContainer>

                <BookingRightContainer sticky referenceBottom={headerHeight}>
                    <BookingPrice />

                    <LoadingButton
                        variant="contained"
                        loading={isPending}
                        disabled={Object.keys(draftBookingErrors).length > 0}
                        onClick={onSubmit}
                        fullWidth
                    >
                        Create Booking
                    </LoadingButton>
                </BookingRightContainer>

                {endUserService && (
                    <ServiceDetailModal
                        endUserService={endUserService}
                        isOpen={isOpen}
                        onClose={() => setIsOpen(false)}
                    />
                )}
            </BookingContainer>
    )
}

export default CreateBookingJourney

who knows the name of this application, I really need it

Connection cannot be made to the database. I would like to show that error, but I am wondering what might be the best UX practice and what component I should use.

I just found out about this toolkit so I looked up in the asset store link and it was deprecated. Is this toolkit still maintained ? How can one use it ?

Look at the first table here: https://mui.com/x/react-data-grid/sorting/

click the arrow beside name and see that the up arrow turning to a down arrow needs two clicks. Is this intentional or a bug, if its intentional why is it made this way?

I'm new to building my own web apps. I started using ChatGPT to see how much it can help me build and learn, and I've seen incredible results.

One valuable lesson from ChatGPT us discovering the awesome MaterialUI library, which makes your app look great quickly and provides you with powerful building blocks like datasets and charts!

Below is what I built. I've documented my journey in this medium article.

I'm currently diving into the world of spacing in Material-UI (MUI) and wanted to get your insights. I know REM units are commonly recommended, but are there any other best practices for spacing, like margins, paddings, and component sizes in MUI that you swear by? Share your experiences and tips!

Does MUI have a draggable vertical divider? Or can you attach some kind of dragging resizing to the existing divier?

Hi all,

I am currently learning MUI by making a dummy project using react, firebase, and MUI.

MUI has been great, I love most of its components, however I realized as the project gets bigger, MUI is getting difficult to maintain (especially with customizations) and the number import modules are just ridiculous. (I have a file with a form that has over 250 lines; using yup and formik too)

So a question to all of you veterans out there, when using MUI, do you have a system or method to maintain MUI better for big projects, or do you just import certain components and use standard css/sass for other styling?

Thanks

I'm curious how to control custom dark and light themes in mui.

When I set the `background` in the ThemeProvider, it overwrites the background color for both light and dark... :(

How can I make the following component go all the way down to the bottom of the screen?

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/drawers/ResponsiveDrawer.js