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
1 answer

Dialog with Transition throwing JS warning "findDOMNode is deprecated in StrictMode"

I've created a simple Dialog component that is draggable and transitions in and out (with Grow) based on the example code here: https://material-ui.com/components/dialogs/#transitions (and scroll down for the draggable example) When I try to use…
jfren484
  • 960
  • 10
  • 13
6
votes
2 answers

How to customise Material UI Tab's indicator width and positioning

I am using the Material ui's tabs and was able to make changes to the Tab's indicator. However, I am trying to reduce the width of the indicator to some fix width for each tab using styles. But it seems the indicator are positioned to left with some…
SHAHBAZ
  • 316
  • 3
  • 15
6
votes
2 answers

Material-UI : Rating Component, change color based on value

Goal To change color of Ratings ( a material-ui component ) based on the value during hover. For example if I hover on 1rst star, color becomes red, if on 5th star then it becomes green. I've tried making a custom component which changes color on…
Neha
  • 3,456
  • 3
  • 14
  • 26
6
votes
3 answers

how could i disable or remove alert component

How can disable the alert, I didn't find a boolean parameter for this in the documentation. import React from 'react'; import Alert from '@material-ui/lab/Alert'; export default function SimpleAlerts() { const classes = useStyles(); return ( …
problème0123
  • 841
  • 2
  • 9
  • 23
6
votes
3 answers

React Material UI + Formik FieldArray Autocomplete control value stays same on remove

I want use Formik's form validation and it actually works just fine, but I ran into some issues with selected value display in Autocomplete component. I Have created Add/Remove buttons to dynamically adjust how many rows are in my form. The bug…
Edward
  • 93
  • 3
6
votes
1 answer

Change Material-UI outlined Chip focus and hover color

Trying to add styles to a Material-UI chip (outlined variant) upon hovering, but not getting the expected results. The border color is white, but the background color doesn't change at all. So I'm questioning whether backgroundColor is even the…
jenny
  • 191
  • 3
  • 12
6
votes
2 answers

Formik Material UI React - Autocomplete - uncontrolled to controlled state

I'm trying to figure out how to follow the instructions in the documentation for the Autocomplete field of the Formik, Material UI, React tool here. The example given in the documentation is: import { Autocomplete } from…
Mel
  • 2,481
  • 26
  • 113
  • 273
6
votes
3 answers

Material-table - if no data show message

I am using material-table https://material-table.com/#/docs/get-started. However I can't seem to find any information about showing a default message if no data is returned? I am wondering if anyone knows how I would go about this. Below is the test…
RussellHarrower
  • 6,470
  • 21
  • 102
  • 204
6
votes
1 answer

Disable backspace deleting of options in Autocomplete

I want to use an Autocomplete (from the Material-Ui library) component from material ui to select multiple options, and those options should not be able to be removed (directly) by the user. The problem I'm facing is that the user can delete the…
LeonMarchetti
  • 105
  • 3
  • 9
6
votes
3 answers

Material UI - how to remove padding from Container when width becomes xs

I want the Container to have no padding when Container becomes xs. I tried the following: https://material-ui.com/api/container/, but I can't get it working. If I add root instead of maxWidthXs in StyledContainer then padding becomes 0 for all…
user249356
  • 61
  • 1
  • 3
6
votes
1 answer

Eslint - Restrict imports from root and enforce tree-shaking

I'd like to block imports directly from the root of a dependency (@material-ui/icons) in my application, as well as enforce tree-shaking. Valid - import AccessAlarmIcon from "@material-ui/icons/AccessAlarm"; Invalid - import AccessAlarmIcon from…
Yanis
  • 81
  • 5
6
votes
1 answer

How to disable Paste (Ctrl+V) and Copy(Ctrl+C)in a TextField of MaterialUI

How can I disable Paste (Ctrl+V) and Copy (Ctrl+C) option in one of my TextFields of MaterialUI? Iḿ using ReactJs
6
votes
2 answers

Hide Material UI grid column on certain breakpoints

I'm trying to hide some columns on certain breakpoints, like this: {/* some content goes here */} So in this example…
Akbar
  • 416
  • 5
  • 20
6
votes
2 answers

Material-Ui theme customization: hover on contained button

So I'm trying to configure a theme for Material-Ui on my React app. In the app I use two different type of buttons, contained and outlined. The problem is the hover effect on the contained button (the outlined works fine) and will default to a grey…
Cedervall
  • 1,309
  • 2
  • 13
  • 20
6
votes
3 answers

React Material UI OutlinedInput does not display error message

Am using React and material UI to display an outlined input. I can make it display that there has been an error with the error prop set to true but there is an issue when i try to add helperText and my message as a prop:
RyanP13
  • 7,413
  • 27
  • 96
  • 166
1 2 3
99
100