I have a Material UI table in React 18 and each cell has a different background color. However this will break the hover style on the row and I am not able to find a solution. Just to be clear…
I am trying to set on MUI Chip different opacity for label/icon and background. My goal is to create Chip with: label & icon opacity = 1, background opacity = 0.0571. Technologies in project: React, TS, MUI V5, Go. My…
I need to know how to change this icon sort in material ui data grid to another icon this my code for use data grid component import { DataGrid, DataGridProps, GridColDef,GridColumnGroupingModel } from '@mui/x-data-grid' export type TableColDef = GridColDef export…
How do I force child element to occupy remaining width of the grid (Material UI)?. I want "User Name" text field to occupy the remaining space of the grid cell. Unfortunately I am not able to do it. I tried…
I have created a custom <Tab/> and I would like to control its selected-color by using Sandbox demo code export const Tab = styled(MuiTab)({ "&.Mui-selected": { color: "red" } }); However, I found that: 1.apply the self-styled component directly =>…
I installed materialUI, emotion/react and emotion/styled as required but can't get MUI to work on my react app. Nothing shows up on my webpage and theres no errors or anything in the console Here's the code: import { Button }…
I'm trying to make a page for editing but the problem is react MUI does not properly render text fields after I updated my form data via reset method of react-hook-form. This is what it looks like: However, if I…
I have a specific palette set for my material ui theme, which i define as so: createTheme({ palette: { primary: { main: '#193C7D', dark: '#112853', light: '#2C4DBC', '900': '#112853', '600': '#16356F', '500': '#193C7D', '400': '#2C4DBC', '100': '#F0F6FF', }, I access…
I'm trying to set another color to the text in TimePicker when it is disabled, but with no success. Does anyone knows how to do change it using sx or slotProps? Here is my current code. <TimePicker disabled={true} // disabled…
I am using Mat-grid-tile tag and i realized that it uses a css class .mat-grid-tile-content which is copy-pasted below. The problem i am facing is that when I use mat-grid-tile tag, the content inside it is shown in the center,…