Disabling Theme transitions do not work without the presence of CssBaseline

The FAQ documentation states how to disable transitions with

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

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

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Progress bars should not animate.

Current Behavior 😯

Transitions are not disabled. However if I add

import CssBaseline from "@material-ui/core/CssBaseline";

somewhere in the rendering tree, transitions stop

	<MuiThemeProvider theme={theme}>
      <div>
        <CssBaseline />
        <LinearProgress />
        <br />
        <LinearProgress color="secondary" />
      </div>
    </MuiThemeProvider>

Steps to Reproduce 🕹

See example: https://codesandbox.io/s/material-demo-yq0x1

Context 🔦

This is breaking all visual regression thats show progress bars.

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React	v16.8.6
Browser	Chrome

[oliviertassinari]

@KamalAman Yes, this would work too. The incentive for using CssBaseline is to rely on the theme configuration exclusively. Maybe we should only show the CSS that needs to be generated and leave the implementation out as a detail.

What do you think, do you want to submit a pull request? 😃

[KamalAman]

@oliviertassinari While adding CssBaseline did disable the transitions, it has other unnecessary side effects.

I seems like documenting MuiCssBaseline and CssBaseline as a requirement to disable transitions is redundant and has unnecessary side effects since it modifies other styles.

One solution is that you could just document how to disable transitions and animations without using a theme.

e.g. To disable transitions and animations add a global css selector

const useStyles = makeStyles(
  theme => ({
    '@global': {
      '*, *::before, *::after': {
        transition: 'none !important',
        animation: 'none !important',
      },
    },
  }),
  { name: 'CssBaseline' },
);

function CssDisableTransitions(props) {
  const { children = null } = props;
  useStyles();
  return <React.Fragment>{children}</React.Fragment>;
}