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

Typescript Box produces a union type that is too complex to represent

Rendering a Box produces the following error: Expression produces a union type that is too complex to represent.ts(2590) As I can see here, this is due to having both @mui/material and @react-three/drei & @react-three/fiber installed. What is the…
Vivere
  • 1,919
  • 4
  • 16
  • 35
6
votes
3 answers

TypeError: theme.spacing is not a function

I'm working on react app and using material-ui v5 and I'm stuck on this error theme.spacing is not working. import { makeStyles } from "@material-ui/styles"; import React from "react"; import Drawer from "@mui/material/Drawer"; import Typography…
anonymous
  • 75
  • 3
  • 6
6
votes
1 answer

Add custom style inside DataGrid Toolbar's popup component Material-UI

I'm creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI. Here is the official example for the Grid Toolbar components: If we click one of the Grid Toolbar components, it will show a…
Jabal Logian
  • 1,666
  • 4
  • 24
  • 46
6
votes
1 answer

Material UI - Theme Style - typography not working

I'm trying to apply typography changes to the theme using Material UI. But object changes are not working. However, the palette is working. I tried to make some changes to the H3 variation and also to the default font size, but none of the changes…
Maximilian Kaden
  • 312
  • 1
  • 3
  • 13
6
votes
1 answer

Material-UI DataGrid column names getting truncated

My column names keep getting truncated, but they should fit in the space.
ecruncher
  • 133
  • 1
  • 6
6
votes
2 answers

How to type a button with react-router-dom Link in MUI v5

Problem I am migrating from MUI v4 to v5 and I am having an issue using the styled function to style a Button component. For some reason, when I use MyButton instead of Button, the compiler has an issue with the component prop. Error Message Type '{…
RouteMapper
  • 2,484
  • 1
  • 26
  • 45
6
votes
1 answer

TypeError: Cannot read properties of undefined (reading 'dark')

I'm trying to use new material UI package. When I use the icons in the buttons, I had an error TypeError: Cannot read properties of undefined (reading 'dark') I've checked the previous errors and MaterialUI site, but could not figure it out. I…
cogut
  • 75
  • 1
  • 6
6
votes
2 answers

Render a DataGrid cell with a colored oval with text/icon in it

I need your help related to mui/x-data-grid. I am trying to render a cell in mui/x-data-grid with text/icon in it based on the text value, but unable to do so. The following is the codesandbox link: codesandbox link And I want something similar to…
user3640820
  • 71
  • 1
  • 6
6
votes
1 answer

Material UI 5.0 Typescript React Custom theme

I have problem with customization of a theme in Material UI 5.0 using typescript. theme.ts import { createTheme } from '@mui/material'; declare module '@mui/material/styles' { interface Theme { custom: { buttonWidth:…
Spongi
  • 501
  • 3
  • 10
  • 19
6
votes
3 answers

Implement pagination for React Material table

I have this Spring Boot endpoint for listing items from database: import React, { useEffect, useState } from "react"; import clsx from "clsx"; import { createStyles, lighten, makeStyles, Theme, } from "@material-ui/core/styles"; import…
Peter Penzov
  • 1,126
  • 134
  • 430
  • 808
6
votes
1 answer

Material UI Autocomplete virtualization w/ react-virtuoso

I have an almost working implementation of Material UI Autocomplete with the dropdown list virtualizised with react-virtuoso. The issue I'm seeing at the moment is that when navigating upwards (0:25 in the video), the list doesn't move past the…
Mbrevda
  • 2,888
  • 2
  • 27
  • 35
6
votes
1 answer

Hide component that renders a Tabs

I have a component that renders Tabs component from Material UI 5.0.0-beta.5 There is a case when I set this components display to none. But, then I get this error - Material-UI: The value provided to the Tabs component is invalid. The Tab with this…
Aniket Banyal
  • 322
  • 1
  • 5
  • 14
6
votes
2 answers

React Material UI DataGrid: Cannot read property 'useRef' of undefined

The problem I am trying to use the React DataGrid. But I am getting a stacktrace in the browser where it caughts a TypeError: Cannot read property 'useRef' of undefined. What have I tried I have tried using different versions of the React DataGrid.…
zerk
  • 516
  • 4
  • 9
  • 34
6
votes
1 answer

How to use theme.transitions.create with emotion?

I had this code in Material-UI v4 that worked perfectly:
6
votes
2 answers

Using conditional styles in Material-UI with styled vs JSS

I'm using Material-UI v5 and trying to migrate to using styled instead of makeStyles because it seems as though that's the "preferred" approach now. I understand using makeStyles is still valid but I'm trying to embrace the new styling solution…
gerrod
  • 6,119
  • 6
  • 33
  • 45