Frequently Asked Questions

Frequently Asked Questions

Stuck on a particular problem? Check some of these common gotchas first.

If you still can't find what you're looking for, you can ask the community in gitter. For how-to questions and other non-issues, please use StackOverflow instead of Github issues. There is a StackOverflow tag called material-ui that you can use to tag your questions.

Why do the fixed positioned elements move when a modal is opened?

We block the scroll as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your fixed positioned elements move. In this situation, you can apply a global .mui-fixed class name to tell Material-UI to handle those elements.

How can I disable the ripple effect on the whole app?

The best solution at present is to write wrapping components for all the Material-UI components showing a ripple. The ripple effect is exclusively coming from the BaseButton component. You can find the components using the ButtonBase here. Then, all you have to do is to provide the disableRipple property.

Do I have to use JSS to style my app?

It's highly recommended:

  • It comes built in, so carries no additional bundle size overhead.
  • It's fast & memory efficient.
  • It has a clean, consistent API.
  • It supports a number of advanced features, either natively, or through plugins.

However perhaps you're adding some Material-UI components to an app that already uses another styling solution, or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the Style Library Interoperability section, where we show how simple it is to restyle Material-UI components with alternative style libraries.

When should I use inline-style vs withStyles()?

As a rule of thumb, only use inline-style for dynamic style properties. The CSS alternative provides more advantages, such as:

  • auto-prefixing
  • better debugging
  • media queries
  • keyframes

How do I use react-router?

We have documented how to use a third-party routing library with the ButtonBase component. A lot of our interactive components use it internally: Button, MenuItem, <ListItem button />, Tab, etc. You can use the same solution with them.

How do I combine the withStyles() and withTheme() HOCs?

There are a number of different options:

withTheme option:

export default withStyles(styles, { withTheme: true })(Modal);

compose() helper function:

import { compose } from 'recompose';

export default compose(
  withTheme(),
  withStyles(styles)
)(Modal);

raw function chaining:

export default withTheme()(withStyles(styles)(Modal));

How can I access the DOM element?

You can use the ref property in conjunction with the findDOMNode() React API. Or you can use an abstraction:

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class RootRef extends React.Component {
  componentDidMount() {
    this.props.rootRef(ReactDOM.findDOMNode(this))
  }

  componentWillUnmount() {
    this.props.rootRef(null)
  }

  render() {
    return this.props.children
  }
}

RootRef.propTypes = {
  children: PropTypes.element.isRequired,
  rootRef: PropTypes.func.isRequired,
};

export default RootRef;

Usage:

<RootRef rootRef={node => { console.log(node) }}>
  <Paper />
</RootRef>

Why are the colors I am seeing different from what I see here?

The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to this page to learn about theme customization.

Material-UI is awesome. How can I support the project?

There are many ways to support Material-UI:

If you use Material-UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a backer, you can do so through OpenCollective.

All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.