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
112
votes
10 answers

How get data from Material UI TextField, DropDownMenu components?

I created a form, I have several TextField, DropDownMenu Material UI components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it to the server. For TextField it has TextField.getValue()…
Vitalii Trachenko
  • 1,174
  • 2
  • 7
  • 10
107
votes
6 answers

react Material-ui, How do I know I can use onClick for button?

The list of properties on the doc doesn't include onClick (http://www.material-ui.com/#/components/icon-button) How do I know I need to use onClick for click handler?
eugene
  • 39,839
  • 68
  • 255
  • 489
105
votes
8 answers

How to make a dropdown menu open below the Appbar using Material UI?

I'm new to Material UI and just started fiddling around with their App bar with Menu example. When toggling the menu dropdown, it opens up over the Appbar itself, whereas I'd like it to open below the Navbar. From the docs, I understand that…
Stiño
  • 2,663
  • 7
  • 25
  • 47
100
votes
16 answers

Intercept/handle browser's back button in React-router?

I'm using Material-ui's Tabs, which are controlled and I'm using them for (React-router) Links like this: }/>
high incompetance
  • 2,500
  • 4
  • 18
  • 26
100
votes
14 answers

How to set focus to a Material UI TextField?

How can I set the focus on a Material UI TextField component? componentDidMount() { ReactDom.findDomNode(this.refs.myControl).focus() } I have tried the above code, but it does not work.
Giles Bradshaw
  • 1,249
  • 2
  • 9
  • 8
99
votes
2 answers

How to apply custom animation effect @keyframes in Material UI?

I have learned to use animation in CSS using @keyframe. I however want to write my custom animation code for my React project (using Material UI). My challenge is how I can write the Javascript code to custom my animations using the makeStyle() in…
mykoman
  • 1,715
  • 1
  • 19
  • 33
98
votes
15 answers

How to align horizontal icon and text in Material UI

I am a newbie in Material UI, now my icon and text are not aligned: My desired results: My code is:
tong
  • 1,001
  • 1
  • 9
  • 8
98
votes
11 answers

How to style material-ui textfield

I have been trying to work out how to style a material-ui TextField component.
Andre DiCioccio
  • 1,191
  • 1
  • 8
  • 10
96
votes
9 answers

jss how to change opacity for a color

Currently I am using the following code to add a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I would like to know if exist a function to add opacity based on…
GibboK
  • 71,848
  • 143
  • 435
  • 658
96
votes
10 answers

Media queries in Material UI components

I am using Material UI components in a React.js project, for some reason I need customization in some components to make it responsive according to screen width. I have added media query and pass it as style attribute in the components but not…
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
94
votes
9 answers

How to add padding and margin to all Material-UI components?

I need to add padding or margin to some of Material-UI components, but could not find an easy way to do it. Can I add these properties to all components? something like this:
rostamiani
  • 2,859
  • 7
  • 38
  • 74
92
votes
3 answers

CSS pseudo selectors with Material UI

I have seen in a lot of the Material UI code that they use pseudo selectors in their react styled components. I thought I would try to do it myself and I cannot get it to work. I'm not sure what I am doing wrong or if this is even possible. I am…
Joff
  • 11,247
  • 16
  • 60
  • 103
92
votes
9 answers

Changing font family of all Material UI components

Can we change the font family of Material UI components with less code? I have tried many ways but still, I can't able to do it. I have to change the font family individually which is really a lot of work. Are there any other ways to do that?
noName94
  • 3,783
  • 1
  • 16
  • 32
88
votes
5 answers

What's the right way to float right or left using the material-ui appbar with material-ui-next?

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",) It seems they removed iconElementRight= from the api. Do we have to use the
87
votes
13 answers

How to use an SVG file in a SvgIcon in Material-UI

I've got an SVG file and I want to make an SvgIcon component out of it, how should I do that? In the documentation, all the examples use either predefined Material Icons or a strange notation of which…
Mehran
  • 15,593
  • 27
  • 122
  • 221