css - Material UI-makeStyles My style doesn't work

Question

I have issues that Material-UI makeStyles doesn't work. I wanna apply my css Style but doesn't work. I think it is caused by Bootstrap or MaterialTable. Although Bootstrap4 is working like 'mt', 'mb', makeStyles is not working. Is this caused by Bootstrap? Also, Does this happen when using both bootsrap4 and material-ui? Here is my package.json.

{
  "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 know the reason, please tell me.

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'
        },
        {
            title: 'バージョン', field: 'version'
        },
        {
            title: '種別', field: 'shubetu'
        },
        {
            title: 'ライセンス', field: 'licenseManage'
        },
        {
            title: '用途', field: 'youto'
        },
        {
            title: '備考', field: 'bikou'
        },
        {
            title: '承認者', field: 'authorizer'
        },
        {
            title: '承認日', field: 'approvalDate'
        },
        {
            title: 'URL', field: 'url'
        }
    ]
    return (
        <div>
            <div className="container">
                <div className={classes.root}>
                    <MaterialTable
                        title="使用許可ソフトウェアリスト"
                        data={dataAll}
                        columns={columns}
                        style={{
                            marginTop: '50px',
                            whiteSpace: 'nowrap',
                        }}
                        options={{

                            headerStyle: {
                                backgroundColor: '#75A9FF',
                                color: '#FFF'
                            }

                        }}
                        localization={localizationJapanese}
                    />

                </div>
            </div>
            <Box pt={4}>
                <Copyright />
            </Box>
        </div>
    )


}

Answer 1

Just change these lines and you good to go:

const useStyles = () => makeStyles({
    root: {
        marginTop: '100px',
        marginBottom: '100px',
        backgroundColor: 'red',
    }
});

to

const useStyles = makeStyles({
    root: {
        marginTop: '100px',
        marginBottom: '100px',
        backgroundColor: 'red',
    }
});