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

How to properly configure babel for material-ui in Next.js?

DOCS: https://material-ui.com/guides/minimizing-bundle-size/#development-environment "Create a .babelrc.js file in the root directory of your project: const plugins = [ [ 'babel-plugin-transform-imports', { '@material-ui/core': { …
TheProgrammer
  • 1,409
  • 4
  • 24
  • 53
6
votes
1 answer

How to display initialValues for material-ui autocomplete field?

I use the autocomplete field of material-ui (v5) and formik to generate my forms. On this form, I have some lists defined as constants. I use an api to get the default value of this list. This api returns only the "code" of the option but not its…
darkvodka
  • 303
  • 1
  • 3
  • 11
6
votes
1 answer

How do I override icons in Material UI DataGrid?

We need to customize most of the icons used in the DataGrid from Material UI. Reading the very limited docs, we cannot figure out how to do that. The documentation talks about slots (but with no explanation on how to use those). There is a icons…
Eric Liprandi
  • 5,324
  • 2
  • 49
  • 68
6
votes
2 answers

How to pass custom props to styled components using Material UI and TypeScript?

I am using TypeScript(v4.2.3) and Material UI(v4.11.3), and trying to pass the custom props to styled component. import React from 'react'; import { IconButton, styled, } from '@material-ui/core'; const NavListButton = styled(IconButton)( ({…
hotcakedev
  • 2,194
  • 1
  • 25
  • 47
6
votes
2 answers
6
votes
1 answer

Query for material-ui input by label in react testing library

I am attempting to write a test case to assert that a number input is disabled while a radio option is selected and am having trouble using React Testing Library utils to query for the HTML rendered by a Material UI . There are…
6
votes
1 answer

Importing only one component from Material UI

need a Stepper component from somewhere and the only adequate one I found was the MUI one. But my app uses react-bootstrap and I don't have it. In this post (Is it possible to install a package that contains only one component of Material-UI? ) the…
Dimitar Nizamov
  • 145
  • 1
  • 8
6
votes
1 answer

Material UI Button loses Styling after page refresh

I'm using useStyles to style my login page. Everything on the page has the right style and it doesn't lose it after the refresh, apart from the button. The button is the only thing in the page that loses the styling after the…
Jackrin
  • 83
  • 3
  • 8
6
votes
8 answers

MUI XGrid Disabling Export button from GridToolBar

How to disable/overide Export button of XGrid's GridToolbar in MUI?
6
votes
3 answers

ReactJS: TypeError: theme.spacing is not a function

I am building a 'ReactJS' application and came across the following error: TypeError: theme.spacing is not a function (anonymous function) E:/Projects/PortfolioSite/React-Portfolio-Website/react-portfolio-website/src/components/Navbar.js:39 36 | …
Pawara Siriwardhane
  • 1,873
  • 10
  • 26
  • 38
6
votes
1 answer

TextField: helperText spanning multiple lines

I have TextField with a helperText. I want to make the helperText span multiple lines. For that I needs some kind of line break. Material-UI renders

{ helperText }

. Since in html line breaks in paragraphs are given by
I tried to add…
ChocolateRain
  • 203
  • 2
  • 9
6
votes
1 answer

How to align several different Material UI select components?

i am trying to align different Material UI select components in my application. in the image you can see that the components are not aligned. how can i give these components the same style, so that they line up next to each other. This is the code…
Ruben
  • 61
  • 1
  • 4
6
votes
1 answer

Gradient border on MUI component

I did not manage to find the equivalent of border-image-source css My goal is to render a border gradient on a button component
seserize
  • 99
  • 3
  • 8
6
votes
1 answer

Material-UI: DataGrid server-side pagination issue when setting rowCount

So I just started using Material UI and pretty much I am loving it. Now, we are working on a project that involves data from users, employees and addresses in a specific city here in Philippines and I decided to use a table to display it to the…
JP Calvo
  • 173
  • 1
  • 2
  • 14
6
votes
1 answer

How can I add MUI theme color to inline style?

Lets say I have these tabs below. How can I use the MUI primary and secondary colors for inline CSS? I would like to use colors from my palette to customize this.
andres
  • 1,558
  • 7
  • 24
  • 62