Use material-ui components into ExtRact app

[d.orkodashvili]

I am trying to migrate from ExtJs to react. As it turned out it is not a very easy process because of the rich components of ExtJs.
So I decided to use ExtReact with material UI. But what I want to do is to use mainly Material-ui components (https://material-ui.com/) and use Ext components when I really need them.

Is it possible to install "@material-ui/core" into my ExtReact application and then use components like <AppBar /> along with the Ext components like <Grid />

When I am trying to do this, I get this error:

Uncaught TypeError: schedulePassiveEffects is not a function

here is the complete component:

import React, { Component } from 'react';
import { ExtReact,Container } from '@sencha/ext-modern';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import { Grid, Column } from '@sencha/ext-modern';


Ext.require('Ext.plugin.Responsive');


export default class App extends Component {
    store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email'],
        data: [
            { name: 'Tim Smith', email: '[email protected]' },
            { name: 'Jill Lindsey', email: '[email protected]' }
        ]
    });


    render() {
        return (
          <ExtReact>
              <AppBar position="static">
                  <Toolbar>
                      <IconButton edge="start" color="inherit" aria-label="Menu">
                          <MenuIcon />
                      </IconButton>
                      <Typography variant="h6">
                          News
                      </Typography>
                      <Button color="inherit">Login</Button>
                  </Toolbar>
              </AppBar>
            <Container html="ExtReact App Template" fullscreen>
                <Grid title="Users" store={this.store}>
                    <Column text="Name" dataIndex="name"/>
                    <Column text="Email" dataIndex="email"/>
                </Grid>
            </Container>
          </ExtReact>
        )
    }
}

[Forum_Adm]

Thank you so much for your post. I apologize for the delay. I have shared this with the support staff and someone will get back to provide assistance as soon as possible. Your patience is greatly appreciated!

Kind Regards,

Michele

[rakumar]

Hello,

This has been reported to an Architect for review and will keep you posted as soon as there is an update.

Regards,
Kumar
Sencha Support.