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

Check the render method of ForwardRef

I use exactly the code as defined in the example from https://material-ui.com/components/bottom-navigation/: // saved in app.tsx: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import BottomNavigation from…
nimo23
  • 5,170
  • 10
  • 46
  • 75
6
votes
3 answers

Material-UI DataGrid not sorting numeric column correctly

I am currently working on DataGrid Component from Material-UI. Data can be displayed, but the inbuilt sorting is not working as expected. When I try to sort ASC/DESC it is sorting based on the first digit of the number. Please look into the picture…
user8188349
  • 197
  • 4
  • 10
6
votes
4 answers

How to display Material-ui Alert based on the response of axios.post reactjs

Currently, using default alert which is alert(response.data.result). To make my site more beautiful, I want to use Material-ui Alert. https://material-ui.com/components/alert/ My issue is I have no idea on how to call it from const. Here's my…
Rymrk
  • 216
  • 1
  • 3
  • 13
6
votes
1 answer

Property 'selectionStart' does not exist on type 'EventTarget'

I am using selectionStart and selectionEnd in order to get the starting and ending point of a text selection. Code: https://codesandbox.io/s/busy-gareth-mr04o However, I am struggling to defined the type of the event on which they can be called…
Magofoco
  • 5,098
  • 6
  • 35
  • 77
6
votes
1 answer

material-ui LocalizationProvider for a remote time zone

My app needs material-ui date and time pickers to operate on a remote time zone specified by the server. I'd like the today circle on the date picker to actually indicate today in the remote time zone, and I'd like to translate the datetimes in the…
Scott Lamb
  • 2,266
  • 1
  • 19
  • 21
6
votes
1 answer

How to save state of column visibility in material ui data grid

I have a fairly simple datagrid table with the option to hide/show specific columns. I want to save the state of the columns when a rerender occurs (in my case when the language is changed). Here is a stripped down sample. Just hide a column and…
user15410756
  • 61
  • 1
  • 2
6
votes
1 answer

In material-ui v5 How are you meant to override the styles of properties that don't exist in the themes components

I am trying to style MuiDataTables and am currently using the adaptv4theme to do it like below declare module '@material-ui/core/styles/overrides' { export interface ComponentNameToClassKey { MUIDataTable: any; MUIDataTableFilterList:…
RedSix
  • 153
  • 1
  • 7
6
votes
1 answer

What to use a Paper or a Card?

I want to make a component as in the photo. Is there a difference in using a paper/card, if I don't need an card API, or using paper in this case "violates the semantics of material-ui"? https://i.stack.imgur.com/U0mLJ.png
6
votes
2 answers

Material UI Datagrid Sticky Header

Is it possible to make the Material UI Datagrid Header sticky? Seems this is possible with the Material UI Tables. I am not able to find an option to do it with a data grid.
Kelvin
  • 2,218
  • 4
  • 22
  • 41
6
votes
5 answers

material UI AutoComplete dropdown position

how to disable autocomplete auto position? want to show autocomplete options always bottom. https://codesandbox.io/s/material-demo-forked-t1luy?file=/demo.js
Rahul Shah
  • 61
  • 1
  • 2
  • 6
6
votes
1 answer

How to prevent nearby text selection when pressing and holding a button on mobile?

I have an application where a user needs to press and hold a button to record audio. However, when a user holds the button on mobile, the browser tries to select nearby text (since the user is holding their finger down). It makes sense sorta, but I…
Jordan Lewallen
  • 1,681
  • 19
  • 54
6
votes
2 answers

Material UI - Custom IconButton with variant props like the real Button

This is my first post so sorry if i forget anything ... For my work i have to use Material UI and i need an IconButton with some contained style like the real Button! I managed to do it with a full copy paste of the Mui Component :…
Xiyitifu
  • 61
  • 1
  • 4
6
votes
3 answers

How to add Edit material-ui icons in data-grid component column component

I am using material-ui data-grid and I want to show Edit material-ui icons against each row. But in data-grid, we don't have any props that can be used for the same. Below is the source code: import React, {useState, useEffect} from "react"; import…
CoderInUi
  • 126
  • 2
  • 4
  • 11
6
votes
1 answer

how to use material-ui select field with formik?

I'm tryin to use formik with material-ui Textfield componet with select attr, everytime i change option it gives me this Warning Material-UI: You have provided an out-of-range value null for the select (name="subIndicatorId") component. Consider…
6
votes
1 answer

How to override Amplify theming with Material UI

I am writing a React app using Material-UI and Amplify UI Components. I want to override the Amplify theming. I can successfully follow the solution on Amplify UI Components Customization to override CSS variables in a custom CSS…
kylevoyto
  • 429
  • 5
  • 11