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
65
votes
18 answers

material-ui TextField disable Browser autoComplete

I use material ui v0.20.0 and I have to prohibit saving the password for a user with TextField. I added props to TextField autocomplete='nope' cause not all the browsers understand autocomplete='off'. It seems that the last version of Chrome 63 does…
Palaniichuk Dmytro
  • 2,943
  • 12
  • 36
  • 66
63
votes
2 answers

In Material UI when do we use Input vs. TextField for building a form?

Maybe this is just a basic question, but so far have not found any reasonable explanation. I am a beginner in React and using Material UI very recently. I am not very clear on when to use an Input vs. Textfield for building a form. Looking at the…
raghuvd
  • 665
  • 1
  • 5
  • 6
63
votes
2 answers

What is AppBar vs ToolBar?

All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two? https://material.io/design/components/ does not have Toolbar component, only "App bars:…
Melissa
  • 902
  • 2
  • 7
  • 11
62
votes
11 answers

Styling the placeholder in a TextField

The TextField API doesn't mention anything about how one could style the pseudo placeholder element of the input element. Basically, I would like to change the default styling of the placeholder text, and the normal bag of tricks doesn't work, as I…
oligofren
  • 20,744
  • 16
  • 93
  • 180
61
votes
4 answers

Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled

I am trying to change the value of Select input and then i am getting the following warning in the console. index.js:1446 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from…
Roster
  • 1,764
  • 6
  • 17
  • 36
61
votes
3 answers

How to override the width of a TextField component with Material UI?

I'm trying to reduce the width of the TextField component : Here is the render method: render() { return (
Nicolas Henin
  • 3,244
  • 2
  • 21
  • 42
60
votes
9 answers

How to disable the hover effect of material-ui button inside of a styled component

I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this? import Button from 'material-ui/Button' import styled from 'styled-components' const StyledButton = styled(Button)` …
ccd
  • 5,788
  • 10
  • 46
  • 96
60
votes
14 answers

Material UI customize button color?

I am struggling to modify button colors in Material UI (v1). How would I set the theme to behave similarly to Bootstrap, so I could just use "btn-danger" for red, "btn-success" for green...? I tried with custom className but it doesn't work properly…
Nema Ga
  • 2,450
  • 4
  • 26
  • 49
60
votes
12 answers

Material-UI's Tabs integration with react router 4?

The new react-router syntax uses the Link component to move around the routes. But how could this be integrated with material-ui? In my case, I'm using tabs as the main navigation system, So in theory I should have something like this: const TabLink…
Daniel Ramos
  • 2,115
  • 3
  • 18
  • 28
60
votes
11 answers

How to apply different color in AppBar Title Material UI?

I am trying to use my custom color for AppBar header. The AppBar has title 'My AppBar'. I am using white as my primary theme color. It works well for the bar but the 'title' of the AppBar is also using same 'white' color' Here is my code: import…
Sijan Bhandari
  • 2,941
  • 3
  • 23
  • 36
60
votes
5 answers

How to combine ReactJs Router Link and material-ui components (like a button)?

I need to find a solution to be able to combine together the functionality of react router with the material ui components. For instance, I've this scenario: a router and a button. What I tried to do it is to mix them together, and restyle…
axel
  • 3,778
  • 4
  • 45
  • 72
59
votes
4 answers

How do you change a style of a child when hovering over a parent using Material UI styles?

I'm using Material UI in react. Let's say I have this component with these styles: const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: theme.spacing(4), '&:hover': { cursor:…
Pieter Buys
  • 1,280
  • 1
  • 10
  • 20
59
votes
13 answers

How can I customize the color of a Checkbox in Material UI?

I am using Material UI in my project, and I have a Checkbox within a div with a black background. But it doesn't look good because the Checkbox is black too. How can I change the color of the Checkbox from black to another color?
kellyxiepei
  • 878
  • 2
  • 8
  • 8
58
votes
12 answers

How to test material ui autocomplete with react testing library

I am using material-ui autocomplete component and am trying to test it using react-testing-library Component: /* eslint-disable no-use-before-define */ import TextField from '@material-ui/core/TextField'; import Autocomplete from…
58
votes
4 answers

What does the CssBaseline class do?

I've been wondering what the CssBaseline class in the Material-UI React library does, but I can't seem to find an answer anywhere, and the page I linked doesn't do much explaining about what the class does. Does anyone here know what this component…