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
285
votes
51 answers

Invalid hook call. Hooks can only be called inside of the body of a function component

I want to show some records in a table using React but I got this error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching…
lwin
  • 3,784
  • 6
  • 25
  • 46
235
votes
10 answers

ReactJS and Typescript : refers to a value, but is being used as a type here (TS2749)

I'm coding a ReactJS class with Typescript and Material-ui, in a .tsx file. In one of my custom components, I want to create a reference to one of the components that I use in my custom component. export class MyTextField extends…
Answerrer
  • 2,803
  • 4
  • 8
  • 18
210
votes
13 answers

How to center a component in Material UI and make it responsive?

I don't quite understand the Material UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?
zorro
  • 2,305
  • 2
  • 11
  • 14
175
votes
4 answers

Using async/await inside a React functional component

I'm just beginning to use React for a project, and am really struggling with incorporating async/await functionality into one of my components. I have an asynchronous function called fetchKey that goes and gets an access key from an API I am…
172
votes
9 answers

How do I avoid 'Function components cannot be given refs' when using react-router-dom?

I have the following (using Material UI).... import React from "react"; import { NavLink } from "react-router-dom"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; function LinkTab(link){ return
JGleason
  • 3,067
  • 6
  • 20
  • 54
169
votes
17 answers

Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from…
Slim
  • 5,527
  • 13
  • 45
  • 81
168
votes
8 answers

How to style components using makeStyles and still have lifecycle methods in Material UI?

I get the below error whenever I try to use makeStyles() with a component with lifecycle methods: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might…
Matt Weber
  • 2,808
  • 2
  • 14
  • 30
155
votes
13 answers

How to add multiple classes in Material UI using the classes props?

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 …
Fatah
  • 2,184
  • 4
  • 18
  • 39
140
votes
4 answers

material-ui Drawer - findDOMNode is deprecated in StrictMode

I have a simple ReactJS app based on hooks (no classes) using StrictMode. I am using React version 16.13.1 and Material-UI version 4.9.10. In the Appbar I am using Drawer.
127
votes
7 answers

Material UI and Grid system

I'm playing a little bit with Material-UI. Are there any options for creating a grid layout (like in Bootstrap)? If not, what is the way to add this functionality? There is a GridList component but I guess it has some different purpose.
kharandziuk
  • 12,020
  • 17
  • 63
  • 121
124
votes
5 answers

How to get the TextField value when enter key is pressed in React?

I want to pass TextField values when user press enter key from keyboard. In onChange() event, I am getting the value of the textbox, but How to get this value when enter key is pressed ? Code: import TextField from 'material-ui/TextField'; class…
Soumya Behera
  • 2,325
  • 4
  • 15
  • 25
123
votes
22 answers

How to change the border color of Material UI TextField

I can't seem to figure out how to change the outline color of an outlined variant TextField I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps" Property but this seems to do nothing. Here is my code…
kinger6621
  • 1,503
  • 2
  • 10
  • 16
123
votes
9 answers

Set min/max on TextField type="number"?

I'm using Material-UI v1.0.0-beta23 along with redux-form and redux-form-material-ui. I have a Field that is type number and I want to set the min and max values on the tag. I've tried both inputProps and min/max and neither seem to do what I want.…
Mike Suiter
  • 1,461
  • 3
  • 10
  • 12
116
votes
4 answers

What is the Material UI Box component for?

Try as I might, I cannot wrap my head around the description given here. The Box component serves as a wrapper component for most of the CSS utility needs. What are 'the' CSS utility needs? What is the use case for this component? What problem…
Xavier Taylor
  • 1,413
  • 2
  • 10
  • 11
113
votes
16 answers

Passing props to Material UI styles

Given the Card code as in here. How can I update the card style or any material UI style as from: const styles = theme => ({ card: { minWidth: 275, }, To such follows: const styles = theme => ({ card: { minWidth: 275, backgroundColor:…
Abdulrahman Alsari
  • 1,667
  • 4
  • 17
  • 28
1
2 3
99 100