Css 材质UI makeStyles我的样式不'；行不通

我有一些问题，材质UI makeStyles不起作用。 我想应用我的css样式，但不起作用。 我认为这是由Bootstrap或MaterialTable引起的。 尽管Bootstrap4的工作方式类似于“mt”、“mb”，但makeStyles不起作用。 这是由引导引起的吗？另外，当同时使用bootsrap4和materialui时，会发生这种情况吗？ 这是我的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"
  },

如果你知道原因，请告诉我

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>
    )


}

从'@material ui/core'导入{makeStyles}；
const useStyles=（）=>makeStyles({
根目录：{
marginTop:'100px'，
marginBottom:'100px'，
背景颜色：“红色”，
}
});
导出常量表=（）=>{
const classes=useStyles（）；
const[dataAll，setDataAll]=useState（[]）；
useffect（（）=>{
CheckListService.getList（）。然后（（响应）=>
setDataAll（response.data）
)
}, [])
常量列=[
{
标题:'リスト番号', 字段：'listNo'
},
{
标题:'採用日', 字段：“saiyouDate”
},
{
标题:'バージョン', 字段：“版本”
},
{
标题:'種別', 字段：“shubetu”
},
{
标题:'ライセンス', 字段：“许可证管理”
},
{
标题:'用途', 字段：“youto”
},
{
标题:'備考', 字段：“碧口”
},
{
标题:'承認者', 字段：“授权人”
},
{
标题:'承認日', 字段：“批准日期”
},
{
标题：“URL”，字段：“URL”
}
]
返回(
)
}

只要更改这些行，您就可以开始了：

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

到

---

谢谢你告诉我。问题解决了！很高兴我能帮忙

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