Dialog confirmation window breaks default material-ui theme colors!

[qweluke]

Hi, This are my button colors setted with material-ui theme

Once I click on "Click me" button a confirmation dialog shows up and all settings are restored to default values

after dialog close, buttons returns to their "normal" colors

here's a demo: https://stackblitz.com/edit/bsanbr

[qweluke]

OK, found a workaround. I need to wrap customUI with MuiThemeProvider

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import PropTypes from 'prop-types';
import { Button, MuiThemeProvider } from '@material-ui/core';
import { mainTheme } from '../assets/theme';

export const generateKeyId = label => `confirmation-dialog-btn-${label.toLocaleLowerCase().replace(/[\s_]/g, '_')}`;
const ConfirmationDialog = props => {
  const { closeDialog, buttons, title, message, customMessage = undefined, dialogProps = {} } = props;

  const handleButtonClick = onClick => {
    if (onClick) {
      onClick();
    }
    closeDialog();
  };

  return (
<MuiThemeProvider theme={mainTheme}>
    <Dialog open aria-labelledby="draggable-dialog-title" {...dialogProps}>
      {title && <DialogTitle data-testid="confirmation-dialog-title">{title}</DialogTitle>}
      <DialogContent>
        {message && <DialogContentText data-testid="confirmation-dialog-text">{message}</DialogContentText>}
        {customMessage && customMessage}
      </DialogContent>
      <DialogActions>
        {Array.isArray(buttons) &&
          buttons.length > 0 &&
          buttons.map(button => {
            const { label, onClick, ...rest } = button;
            return (
              <Button
                type="button"
                key={generateKeyId(label)}
                data-testid={generateKeyId(label)}
                onClick={() => handleButtonClick(onClick)}
                {...rest}
              >
                {label}
              </Button>
            );
          })}

        {!buttons && (
          <Button autoFocus onClick={() => closeDialog()} color="primary" data-testid={generateKeyId('Cancel')}>
            Cancel
          </Button>
        )}
      </DialogActions>
    </Dialog>
</MuiThemeProvider>
  );
};

ConfirmationDialog.propTypes = {
  title: PropTypes.string,
  message: PropTypes.string.isRequired,
  buttons: PropTypes.array,
  dialogProps: PropTypes.object,
};

export default ConfirmationDialog;