I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fine with classes like 'mt' and 'mb', makeStyles does not work as expected. Could Bootstrap be the underlying cause of this issue? And is this a common problem when using both Bootstrap4 and Material-UI together? Below is a snippet from my package.json file.
{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"material-table": "^1.69.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
If you have any insights on why this could be happening, please let me know.
import { makeStyles } from '@material-ui/core';
const useStyles = () => makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});
export const Table = () => {
const classes = useStyles();
const [dataAll, setDataAll] = useState([]);
useEffect(() => {
CheckListService.getList().then((response) =>
setDataAll(response.data)
)
}, [])
const columns = [
{
title: 'リスト番号', field: 'listNo'
},
{
title: '採用日', field: 'saiyouDate'
},
// Additional table columns...
]
return (
<div>
<div className="container">
<div className={classes.root}>
<MaterialTable
title="使用許可ソフトウェアリスト"
data={dataAll}
columns={columns}
// Additional table styles...
/>
</div>
</div>
// Additional components...
</div>
)
}