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
72
votes
8 answers

How to add a link to a List in material-ui 1.0?

The following messes with the onClick animation (the ListItem turns red): While adding the link inside…
Luis F.
  • 1,222
  • 1
  • 11
  • 12
71
votes
11 answers

Does Material UI have an Image component?

I used other react components before, they mostly have their own Image component, but I can't find that in Material-UI? Or is it done via CardMediaAPI? or simply use tags? Thanks!
pure
  • 835
  • 1
  • 6
  • 7
71
votes
13 answers

Cannot get material-ui datepicker to work

For some reason, I cannot get the material-ui datepicker to work. Every time the datepicker is rendered in React, the following error is thrown: RangeError: Format string contains an unescaped latin alphabet character n I have created a stackblitz…
NewVigilante
  • 1,291
  • 1
  • 7
  • 23
71
votes
8 answers

Change root background color with Material-UI theme

I'm trying something very simple: building two themes for a website using Material-UI themes: A light theme and dark one, but it does not work well: the theme is on every Material-UI react element, but the root element on the html document keeps…
yuri
  • 3,182
  • 2
  • 16
  • 26
69
votes
5 answers

Is it possible to render a tooltip on a disabled Material UI Button within a ButtonGroup without breaking the layout?

I'm trying to create a Material UI ButtonGroup with disabled buttons and tooltip. The following code block shows the buttons correctly, but as described here (https://material-ui.com/components/tooltips/#disabled-elements) disabled elements cannot…
Nfinity
  • 718
  • 1
  • 6
  • 7
69
votes
7 answers

MaterialUI Select set value is always out of range

i've a MaterialUI Select code, and i'm handling the value parameter dynamically. My problem is, when i set any value, it says always it's out of range, even showing the value in the valid values. SelectInput.js:291 Material-UI: you have provided an…
colymore
  • 11,776
  • 13
  • 48
  • 90
69
votes
10 answers

How to handle "outside" click on Dialog (Modal)?

My box closes when clicking outside of the box making me lose all the input. I want my box to close only when clicking on the cancel button. I am not sure what is making it close when clicking outside. Any help? I am using @material-ui/core …
rszaman
  • 705
  • 1
  • 5
  • 12
69
votes
6 answers

Make Material-UI Reactjs FloatingActionButton float

After trying to find an example where the FloatingActionButton floats at its standard bottom-right screen position with no results, I come to you if you could provide one because it seems to be a normal button without floating to that corner by…
Franco
  • 11,845
  • 7
  • 27
  • 33
68
votes
7 answers

How to use useStyle to style Class Component in Material Ui

I want to use useStyle to style the Class Component . But this can be easily done hooks. but i want to use Component instead. But I cant figure out how to do this. import React,{Component} from 'react'; import Avatar from…
67
votes
9 answers

Material UI installation doesn't work with React 18

I was trying to install Material UI and icons with my React 18.0 project but I can't. The project has been created using the latest create-react-app npm install @material-ui/core @material-ui/icons npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to…
yechale degu
  • 777
  • 1
  • 4
  • 5
66
votes
16 answers

Material-ui autocomplete clear value

I have one problem in my react code. I use Material-ui and redux-form. I have select input like and after change this select i should reset value in . I use action 'change' from react-form and set value for textfield. But label in still remains.…
Kirill
  • 661
  • 1
  • 5
  • 3
66
votes
12 answers

Set TextField height material-ui

index.js import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux' class SearchField extends React.Component { …
Andrey Radkevich
  • 3,012
  • 5
  • 25
  • 57
66
votes
3 answers

Scrollable List Component from Material-UI in React

How to make the List component (see https://material-ui.com/components/lists/) fixed-size and scrollable? Every time I add a new ListItem the List expands, however I would like to be able to scroll through it if content gets bigger than the…
optional
  • 2,504
  • 4
  • 18
  • 30
65
votes
6 answers

CSS child selector in Material UI

Trying to write a style with Material UI equivalent to this in CSS .deleted td { background: red } But not sure how to do it in Material UI's CSS in JS way. Here are the relevant snippets I have currently const styles = theme => ({ deleted:…
hackerl33t
  • 2,117
  • 3
  • 14
  • 21
65
votes
14 answers

React Material UI Label Overlaps with Text

I'm using Material UI in a React application and trying to implement an entity update page. In this, we would need to set the exiting values of the entity to let the user update them. The existing values have been set using the defaultValue…
imesh
  • 1,374
  • 1
  • 15
  • 18