From e859f4c09f3233685884271334c4741b1dad34a3 Mon Sep 17 00:00:00 2001 From: joshwooding <12938082+joshwooding@users.noreply.github.com> Date: Tue, 4 Dec 2018 23:21:48 +0000 Subject: [PATCH 1/3] Add example of globally disabling animations --- docs/src/pages/getting-started/faq/faq.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index 01634eda891bf1..8cdc4902b3e5c2 100644 --- a/docs/src/pages/getting-started/faq/faq.md +++ b/docs/src/pages/getting-started/faq/faq.md @@ -38,6 +38,29 @@ 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. +## How can I disable animations globally? + +You can disable animations globally by providing the following variables to 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 💣! + }, + }, + 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? It's highly recommended: From 6b87abe567fc3ea795fc67a39778719aa580b839 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 5 Dec 2018 00:29:18 +0100 Subject: [PATCH 2/3] update the ripple effect faq at the same time --- docs/src/pages/getting-started/faq/faq.md | 27 ++++++++++++++--------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index 8cdc4902b3e5c2..38909fe4a38566 100644 --- a/docs/src/pages/getting-started/faq/faq.md +++ b/docs/src/pages/getting-started/faq/faq.md @@ -1,6 +1,6 @@ # Frequently Asked Questions -

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

+

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

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. @@ -31,16 +31,11 @@ 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 variables to your theme: -## How can I disable animations globally? - -You can disable animations globally by providing the following variables to your theme: ```js import { createMuiTheme } from '@material-ui/core'; @@ -52,14 +47,26 @@ const theme = createMuiTheme({ disableRipple: true, // No more ripple, on the whole application 💣! }, }, +}); +``` + +## How can I disable animations globally? + +You can disable animations globally by providing the following variables to 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. + +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? From 964b9e45ce109896d6a667b02774427f0d13b655 Mon Sep 17 00:00:00 2001 From: joshwooding <12938082+joshwooding@users.noreply.github.com> Date: Tue, 4 Dec 2018 23:52:09 +0000 Subject: [PATCH 3/3] Reworded changes slightly --- docs/src/pages/getting-started/faq/faq.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index 38909fe4a38566..05ef5f41ffeb88 100644 --- a/docs/src/pages/getting-started/faq/faq.md +++ b/docs/src/pages/getting-started/faq/faq.md @@ -34,7 +34,7 @@ In this situation, you can apply a global `.mui-fixed` class name to tell Materi ## How can I disable the ripple effect globally? The ripple effect is exclusively coming from the `BaseButton` component. -You can disable the ripple effect globally by providing the following variables to your theme: +You can disable the ripple effect globally by providing the following in your theme: ```js import { createMuiTheme } from '@material-ui/core'; @@ -52,7 +52,7 @@ const theme = createMuiTheme({ ## How can I disable animations globally? -You can disable animations globally by providing the following variables to your theme: +You can disable animations globally by providing the following in your theme: ```js import { createMuiTheme } from '@material-ui/core';