Questions tagged [material-ui]
React components that implement Google's Material Design. Please note that this tag should be used for questions regarding the MUI (formerly Material-UI) library. Otherwise, see the tag's info for other tags to use.
16,761
questions
0votes
0answers
6views
styled-components doesn't work with material-ui
my question is what is the different between this two { styled }??
import { styled } from "@mui/system";
and
import styled from "styled-components";
---------------------------
...
0votes
0answers
5views
Material UI portal component vanishes after page refresh in next.js
I use Next.js and Material UI. I need to render an element in another place, because of the Swiper library that I use.
For this purpose, I'm using Material UI's <Portal> component and here's my ...
0votes
0answers
10views
MUI v5 - Correct way to use <CSSTransition> component
I'm using MUI v5 and trying to avoid using the deprecated useStyles hook. SOP seems to dictate using the sx prop in MUI components, however to use CSSTransition and other components from react-...
- 253
1vote
1answer
14views
material-ui horizontally align two cards below first card
How can I align Graph Two and Graph three horizontally below Graph One ?
In other words I want to leave Graph One card how it is but move Graph two so it is on the same level and Graph three and they ...
- 13
0votes
0answers
7views
Hiding Scrollbar from Material UI Treeview, while maintaining scroll functionality
How do I maintain the vertical scroll functionality, while at the same time, hiding the scrollbar in Material UI's Treeview API? I have tried a few combinations of styling directly in the tree view ...
- 11
0votes
0answers
14views
Best method to keep track of a users progression through reading sections of text
Similar to zyBooks if you are familiar with it, I want to track the sections the user has read through and checked completed with a button.
However, conceptually I am having trouble thinking of what ...
- 1
0votes
1answer
21views
How do I put these text and icon side by side?
I have these text and icon which are really far from each other
How can I put the Icon on the right side of the text? Something like this:
Water Jug->
Codesandbox: https://codesandbox.io/s/...
0votes
0answers
3views
MUI TextField size growing through div transition
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the ...
- 11
0votes
0answers
12views
Position sticky not working on Material UI Accordion Element in React
I was making a website, and I want a little box on the side that isn't affected by scrolling. I am doing this in React. I heard of position sticky, but it doesn't seem to work. I don't have any ...
0votes
0answers
9views
How to solve 'reading main' error in AppBar
I migrated from material-ui 4.x to @mui-material 5.5.2 (latest).
At compile time it does not return any errors.
But when the application is accessed it returns an error on the console and only a white ...
- 1
1vote
1answer
28views
Pagination in Material UI in React
I wanted to have a pagination depending on the length of the array.
Right now, the length of the array is 2. So the total pages should be 2.
I wanted to display them depending on each array by page. ...
- 5,286
0votes
0answers
6views
How to make re-usable tabs component with page routing (Navbar) with next Js, Material UI
I can't make a reusable nav bar component from tabs from MUI in next js.
So I am trying to use tabs from MUI as a navigation bar. I also want it to be re-usable, so using a const to populate it, and ...
- 1
0votes
0answers
17views
Is it advisable to use SCSS modules to style my React components built with MUI V5?
I am currently migrating a CRA TypeScript project built with mui V4 to mui V5. The old makeStyles API can still be used as a legacy syntax, but it will no longer be compatible with React V18 strict ...
- 451
0votes
0answers
7views
React and Material UI: How to organize page layout using Box?
I'm developing a web app using React and Material UI. I would like a layout with two Boxes inside a third one. The Box at the bottom should be just high enough to hold its contents. The Box at the top,...
0votes
0answers
14views
How to override a prop component used as props in the returned component
I'm coding a component to facility the use of material-ui React Autocomplete component, It new component has a few props then return the React Autocomplete component with its own props assigned, how ...
- 352
0votes
1answer
12views
makeStyles in Material-ui need to use so many ( !important <= css code ) to style mui components
I'm now trying to create a website using material-ui with react.
I needed to add my own style to mui components. For this purpose, I used the makeStyle from '@mui',
But
The problem is that if I want ...
0votes
0answers
13views
What is the alternative component of message.error() [antd] in material UI?
I am new to material UI (web), but I have used and. I need to show something like message.error(antd popup) which I can do without putting it in the render part and call it as a simple function... How ...
0votes
1answer
17views
Check radio on button click or click on radio
Using mui to create a radio button within a button and it should be possible to click on either the radio button or the button, when clicking on either of them the radio has to be checked. Only one ...
- 269
0votes
0answers
8views
handleChange not fired when selecting date with material ui
So I'm trying to set the date with material ui datepicker but when clicking on a given date a window the selected is not choosed and the date window doesn't close. I think is because I pass the date ...
- 13
0votes
0answers
3views
React Material UI DatePicker - how to disable the "edit" button?
I'm working on a React project that uses the MUI library for the UI. I need to create a date picker element. The date picker has this "edit" button, and I'm not sure what it does, but it ...
- 1
0votes
0answers
11views
MUI nested Tabs error - The `value` provided to the Tabs component is invalid
Getting this error while using nested mui tabs:
MUI: The value provided to the Tabs component is invalid.
The Tab with this value ("1") is not part of the document layout.
Make sure the tab ...
- 13
0votes
0answers
15views
MUI V5 TextField
I am trying to customise my theme for material v5 and I would like to know how I can disable the black border that appears when I hover over the textfield component. This is what I have so far under ...
- 44
0votes
1answer
18views
How to center components of grid in MUI?
I am very new to MUI and I am working with the grid at the moment.
<Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{...
- 70
0votes
0answers
12views
Building custom component library for MUI-5, What should be dependencies vs peer dependencies?
I'm currently building a react component library to be delivered as an npm module.
I want the library to have the capacity to style components, run storybook to display the components, and have ...
- 29
0votes
1answer
11views
Preventing auto fullWidth with MUI Button?
I am using a styled Button from MUI:
export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({
marginTop: 8,
marginBottom: 8,
width: 'auto',
...
- 463
-2votes
1answer
25views
How can I know when the mobile keyboard is open in React
I have the Textfield below which has the Autofocus attribute,i want to know if there is a way to know when the keyboard is open in mobile view and store it in a boolean variable.
- 880
0votes
1answer
18views
How can I use MUI pagination?
I'm trying to change the content displayed on screen accordingly with what is selected in pagination, but I am not figuring out how it is done, can someone help me please?
The Api I'm using will ...
- 109
0votes
1answer
17views
Rendered Component doesn't show in storybook
I want to render MUI Button Component in my storybook and then change MUI attributes(variant, color, disabled, etc.) from storybook. I could get result when working on simple plain html button but it ...
- 41
0votes
0answers
10views
MUI Data Grid Pro - how to remove column menu animation
im using the MUI Data Grid Pro, and trying removing the animations.
currently i managed to remove the open animation but when closing the closing animation remains.
for example: the column menu on ...
- 633
-1votes
0answers
19views
¿What is the problem here with material Ui table?
Error => material-table.js:872 Uncaught TypeError: Cannot read properties of undefined (reading 'direction')
Code:
useState
} from 'react'
import './App.css';
import MaterialTable from 'material-...
0votes
0answers
7views
mui datagrid with React-dnd
I used to have a mui treeview which is simple to extend with react-dnd because treeitem is a react component.
In a datagrid however, the row are an array of JSON object and not a react component ...
- 23
1vote
1answer
16views
Overriding MUI Stepper styles in React 2022
I've been struggling with the proper way to override styles for a React MUI Stepper component in 2022. More specifically in the active, and completed states for the label as well as the circle icon.
...
- 175
1vote
0answers
24views
Unable to edit MUI TextFields after populating from API
I am trying to allow MUI TextFields to be editable after populating them from an API.
The TextFields are successfully populating.
I have tried using an onChange method which allowed only one extra ...
- 111
0votes
0answers
6views
material ui - react - dropzone preview in card
I am working with React and Material ui, I would like to create a component like this:
It is basically a card component, on the bottom there is a dropzone ( material-ui-dropzone ). I would like that ...
- 474
0votes
1answer
14views
Why my 'Select' components in react are synchronized together?
I am currently using materialui to create a submission page. I have created two 'Select' components for the page, and there is a problem that if I choose an option from the second 'Select' component, ...
- 1
1vote
0answers
23views
Scoping v5 MUI Styles
We have a legacy application that we're slowly migrating to React and MUI. In order to prevent overlap in styling between the different parts of our application that haven't been converted and vice ...
- 11
0votes
0answers
4views
KeyboardDatePicker readOnly true race condition
KeyboardDatePicker from "@material-ui/pickers": "^3.3.10" exhibits a race condition for the readOnly property. In 3 out of 10 automated cypress.io tests, the following click ...
- 9,143
1vote
0answers
18views
Customization MUI theme.palette insufficient : 10 hues of Primary not accepted?
I work on react-typescript and I have to create a rather complex MUI theme.palette.
Besides the inbuild primary/secondary/error/warning/info/success I manage to create a customized entries such as ...
- 23
0votes
0answers
9views
React Hook Form is Dirty when using MUI Autocomplete component
I'm using React-Hook-Form together with Material-UI (MUI). The isDirty flag just works fine, except when I have a Autocomplete component in my form.
I dont need to modify the autocomplete itself, it ...
- 723
0votes
0answers
11views
Input type number is blank, but stored 0 as default
The initial value is blank, but when I POST the form it is as default value 0 and not null
const formik = useFormik({
initialValues: {
previous_experience: "",
}})
...
- 309
0votes
0answers
13views
How to delete chips inside Autocomplete multiple input field with react-hook-form and Mui
As written on the title I have a problem to eliminate the chips inside a multiple input of MUI, using react-hook-form and the Controller component.
I can only reset the value, but not remove the ...
- 23
0votes
0answers
15views
Display a Box in the bottom of the page not working in IOS
I want this box to show in the bottom of the mobile page.When you are type on search box and the keyboard is show up the is not shown in the IOS view is still on the bottom:0px position. In stead of ...
- 880
0votes
0answers
23views
React Material UI v5 TypeScript extend component type
How to extend MUI component type with props and add extra props with minimum imported stuff? If possible without giving types to props, only to component itself. Also I want to keep the ability of ...
- 90
0votes
3answers
24views
Style component according to their props when building MUI custom theme
I am building a custom MUI theme and I struggle to style the notchedOutline of a disabled <OutlinedInput />. I simply want that when the input is disabled, the border color is lighter than the ...
- 4,235
0votes
1answer
25views
Change border color of MUI disabled outline input
I am really struggling to find where this border color is defined. I have inspected the dom but see no border style in any of the input component nor its pseudo elements...
I simply want to lighten ...
- 4,235
0votes
1answer
23views
ListItem Fill List And Overflow
I want to have a ListItem that vertically fills the list completely, and sometimes overflows it.
That means I need access to the height of the empty space in the list. It would be the minHeight, and ...
- 83
0votes
0answers
12views
How add row selection functionality on action in material table
I want to add selection functionality on action of materila-table. Below is code snippet which select only one row not multiple row.
Basically I want to display an icon in action column and give ...
0votes
1answer
15views
React Button with mui not changing colors correctly
I have code that looks similar to the following
import { Button ) from '@mui/material';
import { makestyles } from '@mui/styles';
const useStyles = makeStyles ({
button: {
cursor: "...
0votes
1answer
15views
How can I set params from rails server on Transfer List?
I'm using material ui.
I want to set data from rails into Transfer List.
My params is like this:
0: {id: 1, name: 'Rank A', deleted_at: null, created_at: '2017-09-13T00:54:26.000+09:00', updated_at: '...
- 61
1vote
0answers
21views
Why is the `sx` prop so much slower?
As per MUI's own doco, and this answer - components using sx render significantly slower than components using other styling mechanisms.
On the surface, it looks like sx is just an alternate ...
- 15.6k