Плавный переход с помощью Material Ui Dialogs

Question

Я использую Диалоги материалов-пользовательского интерфейса

В моем диалоге я хочу отобразить 2 разных компонента. Таким образом, есть мой компонент Диалог, я передаю содержание имеет "детей" реквизит.

Поскольку один из моих компонентов должен отображаться широко, а другой - менее широко. Я пропускаю реквизиты "fullWidth" в зависимости от того, какой компонент отображается.

import React from "react";
import "./style.scss";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import { withStyles } from "@material-ui/core";

const styles = {
  "-webkit-transition": "all 1s ease",
  " -moz-transition": "all 1s ease",
  "-o-transition": "all 1s ease",
  " -ms-transition": "all 1s ease",
  transition: "all 1s ease"
};

const ModalExpensive = props => {
  return (
    <Dialog
      open={props.open}
      onClose={props.onClose}
      fullWidth={props.fullWidth}
      maxWidth={"xl"}
      classes={props.classes}
    >
      <DialogContent>{props.children}</DialogContent>
    </Dialog>
  );
};

export default withStyles(styles)(ModalExpensive);

С этим все в порядке. Отображение компонентов хорошо зависит от того, какие действия я выполняю, Диалог хорошо меняет размеры

Но проблема в том, что я хочу иметь плавный переход (ширина) *1018* при изменении содержимого от тонкого к широкому или от широкого к тонкому.

Я пытаюсь поставить класс с CSS. не работал Я пытаюсь использовать withStyle. не работал

это возможно только? Что я делаю неправильно ? Спасибо

РЕДАКТИРОВАТЬ: когда я говорю "плавное изменение размера", я имею в виду переход CSS, как: https://codepen.io/grayghostvisuals/pen/joniB