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.

Filter by
Sorted by
Tagged with
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"; --------------------------- ...
user avatar
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 ...
user avatar
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-...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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/...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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. ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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,...
user avatar
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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 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 }}> {...
user avatar
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 ...
user avatar
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', ...
user avatar
  • 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.
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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-...
user avatar
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 ...
user avatar
  • 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. ...
user avatar
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 ...
user avatar
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 ...
user avatar
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, ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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: "", }}) ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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: "...
user avatar
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: '...
user avatar
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 ...
user avatar
  • 15.6k

15 30 50 per page
1
2 3 4 5
336