Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add example of globally disabling animations #13805

Merged
merged 3 commits into from
Dec 5, 2018
Merged

[docs] Add example of globally disabling animations #13805

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e859f4c
Add example of globally disabling animations
joshwooding Dec 4, 2018
6b87abe
update the ripple effect faq at the same time
oliviertassinari Dec 4, 2018
964b9e4
Reworded changes slightly
joshwooding Dec 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions docs/src/pages/getting-started/faq/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Frequently Asked Questions

<p class="description">Stuck on a particular problem? Check some of these common gotchas first.</p>
<p class="description">Stuck on a particular problem? Check some of these common gotchas first in our FAQ.</p>

If you still can't find what you're looking for, you can ask the community in [gitter](https://gitter.im/mui-org/material-ui).
For how-to questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues. There is a StackOverflow tag called `material-ui` that you can use to tag your questions.
Expand Down Expand Up @@ -31,12 +31,42 @@ 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?
## How can I disable the ripple effect globally?

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](https://github.com/mui-org/material-ui/search?utf8=%E2%9C%93&q=%22%2F%2F+%40inheritedComponent+ButtonBase%22).
Then, all you have to do is to provide the `disableRipple` property.
You can disable the ripple effect globally by providing the following in your theme:

```js
import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({
props: {
// Name of the component ⚛️
MuiButtonBase: {
// The properties to apply
disableRipple: true, // No more ripple, on the whole application 💣!
},
},
});
```

## How can I disable animations globally?

You can disable animations globally by providing the following in your theme:

```js
import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({
transitions: {
// So we have `transition: none;` everywhere
create: () => 'none',
},
});
```

Sometimes you will want to enable this behavior conditionally, for instance during testing or on low-end devices,
in these cases, you can dynamically change the theme value.

## Do I have to use JSS to style my app?

Expand Down