MUI is not working

[YogitaKadam14]

Hello Team,
I want to use a TextField from '@mui/material'
The style is not applied for @mui component. It works well for material-ui.

Steps to reproduce the behavior:

The code in my app.js

import React, { FC, useContext } from 'react'; import { EventContext } from 'direflow-component' import Button from '@material-ui/core/Button'; import SearchIcon from '@mui/icons-material/Search'; import {TextField,InputAdornment} from '@mui/material'; interface IProps { componentTitle: string; sampleList: string[]; } const App: FC<IProps> = (props) => { const dispatch = useContext(EventContext); return ( <div> <Button variant="contained" color="primary"> My Material UI Button </Button> <TextField size="small" helperText={false} label='Search by Name' InputProps={{ endAdornment: ( <InputAdornment position="end"> <SearchIcon color="disabled" /> </InputAdornment> ), }} /> </div> ); }; App.defaultProps = { componentTitle: 'Membership Component', sampleList: [ 'Create with React', 'Build as Web Component', 'Use it anywhere!', ], } export default App;

** Index.tsx**

import { DireflowComponent } from 'direflow-component' import App from './App'; export default DireflowComponent.create({ component: App, configuration: { tagname: 'membership-component', useShadow: true, }, plugins: [ { name: "material-ui" } ], });
`
output

Thanks and Regards,
Yogita Kadam, SDE-2
Email: yogita.kadam@elastikteams.com
Phone: 8623069398