Questions tagged [material-ui]

This tag should be used for questions regarding the Material UI library: React components that implement Google's Material Design. This open-source project is maintained by MUI.

Stack Snippet Template

HTML

<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>

<div id="root"></div>

JavaScript

const {
   Button
} = MaterialUI;


function App() {
  return (
    <div className="App">
      <Button variant="contained" color="primary" >Hello</Button>
    </div>
  )
}

ReactDOM.render(
   <App />,
   document.getElementById('root')
);

Related tags

  • for questions that are React related.
  • for questions that are Material Design related.
22107 questions
6
votes
1 answer

how to expand TextField to full width in the grid container?

The TextField component is not drawn to full width while the Paper component is drawn to full width. Does somebody have any idea?
Alligator
  • 250
  • 1
  • 7
  • 14
6
votes
3 answers

Change React Material-UI DataGrid (table) Default Font Size

Using Material UI DataGrid, the default font in table is too small to see text. My code is literally a copy/paste of their demo on the page: https://material-ui.com/components/data-grid/ My fonts are very small in the table. Rest of page not using…
Scott
  • 61
  • 1
  • 1
  • 2
6
votes
3 answers

Change the color of MUI Autocomplete option

I'm using the Autocomplete of Material UI and I have a list with the attribute Color. I have to render option by option with the respective color in option background. Here's a example: import React from "react"; import TextField from…
Reinaldo Peres
  • 303
  • 2
  • 5
  • 14
6
votes
4 answers

Material UI Toggle Button - can't change background color when selected

I'm trying to use the Material UI Toggle Button kind of like a radio button to give the user 2 choices to a given question. It's functioning mostly as expected, but when trying to adjust the style for when each toggle button is selected, I can't get…
Sam Goodman
  • 61
  • 1
  • 2
6
votes
2 answers

Make mui autocomplete persist the input value after selection

After typing a value and selecting an option in Material-UI Autocomplete with Multiple, the entered value is cleared. Is there a way to make AutoComplete persist the typed value even after selection? Like the one bellow... Demo:…
danieljaguiar
  • 335
  • 4
  • 14
6
votes
2 answers

Testing specific MaterialUI Icon

Is it possible to test in specific Material UI icon as ArrowLeft / ArrowRight instead of .MuiSvgIcon-root? App component: return {open ? :} RTL Testing : Below tests are passing but it doesn't check in specific ArrowLeft…
Dy4
  • 687
  • 1
  • 9
  • 20
6
votes
1 answer

Missing MaterialUI Table Props in Storybook

I'm using MaterialUI which I slightly modify (styling/logic) in order to create a custom library. I'm also using Storybook (with Typescript) to create documentation. The problem I'm facing is that the storybook table props are not always…
Bassem
  • 3,582
  • 2
  • 24
  • 47
6
votes
2 answers

css breaks in production of Gatsby, MaterialUI

I have a gatsby website that uses MaterialUI Components. Somehow the css styles get applied to the wrong components of my website. I got the following code that is related to the problem. Layout.js
quadroid
  • 8,444
  • 6
  • 49
  • 82
6
votes
0 answers

How to implement the infinite scroll in React Material Autocomplete?

I am trying to add infinite scroll function to the react material ui autocomplete(https://material-ui.com/components/autocomplete/). But i couldn't find the way to solve this problem , if anyone had already experience in this, please help me.
6
votes
2 answers

How to set the zIndex on the drawer component

I am trying to acheive the clipped under the app bar style temporary drawer. But I can't seem to be able to set the z index on the temporary drawer. The temporary drawer in material-ui has the z-index of the modal component which is 1300 as…
Va_M
  • 522
  • 2
  • 5
  • 18
6
votes
3 answers

How to change material-ui select value?

Let's start by consider this little snippet: import "./styles.css"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemIcon from "@material-ui/core/ListItemIcon"; import…
BPL
  • 9,632
  • 9
  • 59
  • 117
6
votes
1 answer

Material UI grid items overflow their grid container on Safari

I ran into a problem on Safari browser where my Material UI Grid container does not hold its Grid item elements within it's boundaries. This seems to be a problem only for Safari browsers. And here is my code for the page.
Oleksandr Fomin
  • 2,005
  • 5
  • 25
  • 47
6
votes
3 answers

How to change icon when accordion summary is expanded?

I want to change the icon based on whether the accordion is expanded or not. I see that on the material ui page that the CSS have .Mui-expanded which can see whether expanded={true} or false, but how can I use this to set a different icon when…
Tuan Le
  • 103
  • 1
  • 3
  • 10
6
votes
2 answers

Material-ui conditionally disabled radio

I'm building a React app with material-ui. I want to disable all my radio buttons in a RadioGroup when a certain event happens and re-enable them when the event goes away. (Say when I click a button, all radios are disabled, when I click the same…
Young
  • 739
  • 3
  • 9
  • 12
6
votes
1 answer

How do I use Material-UI icons in React Native

I'm using react native and I am trying to use Material-UI icons. I have npm installed both @material-ui and @material-ui/icons. I have included: import AddIcon from "@material-ui/icons/Add"; To the top and I have the icon in my return as:
Marnie Rodriguez
  • 431
  • 2
  • 8
  • 22
1 2 3
99
100