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
2 answers

Text field with multiple value(image included for reference)

I'm looking for a text field with multiple inputs as: Here as you can see I can add new text and on press of enter it saves that keyword. Can someone guide which package to look for.... I found something similar in material ui autocomplete's…
Sushant Rad
  • 249
  • 2
  • 10
6
votes
3 answers

How to write test cases for tabs in Material UI using react testing library?

I am using Material UI tabs in my application and using react testing library. I need to write test cases which for navigating from one tab to another one. Can anybody help me with this, since the code below is not properly working. Thanks in…
Gowtham Manthena
  • 199
  • 5
  • 21
6
votes
3 answers

Nextjs css flickering

I'm building a react app using material ui and nextjs. I'm using component, provided by material UI and override some its styles with my own like this:
Max Filippov
  • 2,024
  • 18
  • 37
6
votes
1 answer

Why do makeStyles and createStyles have to be separate (Material UI + TypeScript)?

I've been using this construction that Material UI requires to deal with TypeScript issues a lot and it's really bugging me that every time I want to style a component I need to remember how to combine 2 different functions into something that will…
Michał Gacka
  • 2,935
  • 2
  • 29
  • 45
6
votes
1 answer

Adding a linear gradient to Material UI icon

I've tried the process described in this question Trying to add linear gradient to a martialUI icon as a comment stated it should work, but it does not for me. Thinking that maybe the icons counted as text, I've tried several of the ways to add…
6
votes
5 answers

How to have multiple row tabs in Material UI Tabs

I have almost 30 tabs inside Material UI Tabs, the user has to scroll two times to see all the tabs, I would like to show the tabs in two rows with scroll instead of one row with scroll, this will help the user to see most of the tabs in one…
Ali Ahmadi
  • 701
  • 6
  • 27
6
votes
2 answers

How can you use the @supports css rule in material ui makeStyles?

How can you use the @supports css rule in material ui makeStyles? I tried to search that but didn't find anything describing how to include css rules like supports Here is the styles I want to have: @supports (display: grid) { div { display:…
Anatol
  • 3,720
  • 2
  • 20
  • 40
6
votes
7 answers

How Can i limit the maximum number of options that can be selected in a Material UI lab Autocomplete component

(for instance) I wish to limit user selecting only 3 options in my Autocomplete component, and disable the options when the length of TAG Array reaches 3. The problem is there is no limitMaxNumberOfTags option in the api, and i cant get any way to…
doctor_acid
  • 91
  • 1
  • 1
  • 6
6
votes
1 answer

With Material-UI's DataGrid component, how do I create multi layered text in one of the cells?

I'm trying to have two separate lines of text within one cell, where one line of text is on top of the other, in Material-UI's datagrid component and can not seem to get anything to work. This is what I have tried: const columns: ColDef[] = [ …
ZimZimma
  • 178
  • 1
  • 1
  • 7
6
votes
3 answers

Material UI Input not detecting when enter key is pressed

I am using Material UI for my React project and unable to detect when the enter key has been pressed. I have tried the following which I thought should work but still unable to detect the event, not sure what I am missing. I have a custom MUI…
p_waves
  • 361
  • 1
  • 6
  • 12
6
votes
2 answers

When installing Material UI, I am prompted with a series of errors?

When I attempt to install Material UI using npm install @material-ui/core , I am prompted with many errors: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: portfolio@0.1.0 npm ERR!…
dando
  • 63
  • 1
  • 4
6
votes
2 answers

How can I check the type of material ui theme in react js? (light or dark)

I want to create certain conditions based on whether the type of material ui theme is light or dark How can I do that?
jepbura
  • 372
  • 1
  • 6
  • 16
6
votes
5 answers

ClickAwayListener doesn't fire when clicking on a link/button to navigate to other route

I'm using Material-UI ClickAwayListener component with the existing code that used react-router. The button is outside of the ... and so I expected the onClickAway to fire before navigating to other route.…
kunquan
  • 1,127
  • 1
  • 10
  • 24
6
votes
1 answer

determining image file size of a react Material-ui CardMedia

Good evening, I'm using a material-ui Card inside a React functional component, with a CardMedia such as : I'm trying to determine the image file size in…
Jean Coiron
  • 632
  • 8
  • 24
6
votes
3 answers

How to align material-ui Grid items vertically centered?

I have a Grid container and Buttons as it's children (Grid-items). I want to align Grid-items vertically centered. Here is the visual representation of my requirement Here is the markup
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98