I'm facing following issues while integrating Amplify auth in an existing React application,
"Row per page" on the grid is not showing vertically, they are lined up horizontally. MUI x-data-grid-pro 5.17.22 is being used. Rows per page in grid
The li tags also appear in a row, not as a list. li tags
Dialog's Close Button has also been changed to a strange location. Clos button
Since my project only needs Amplify's Auth, I commented out the amplify's css.
// Amplify
import { Amplify, Hub } from 'aws-amplify'
// import '@aws-amplify/ui-react/styles.css';
import Auth from '@aws-amplify/auth';
import awsExports from "../aws-exports";
Amplify.configure(awsExports);
After applying Amplyfy, certain css of MUI are not executed. In the case below, .css-1gs62wq is not executed and "Rows per page" is displayed in a row, not a list
Here are important dependencies I use
"@aws-amplify/auth": "^5.1.14",
"aws-amplify": "^5.0.20",
"@mui/material": "^5.6.0",
"@mui/x-data-grid-pro": "^5.17.22",
"webpack": "4.44.2",
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
The existing project has no UI issues. After integrating with the Amplify, UI issues occur. Amplify seems to be the cause, but I can't solve them.
Can someone please help me here to figure out what I'm missing?
Thanks Young
I tested with the latest version of @mui. But the problem is not solved.
