类型错误：主题未定义 - 尝试渲染 Material UI 组件时

如何解决类型错误：主题未定义 - 尝试渲染 Material UI 组件时

由于我分离了我的 jss 文件并将其从 makeStyles 更改为 withStyles 以避免钩子问题，因此我在呈现我的 react 组件时遇到了问题。

我在我的 jss 样式文件中收到一条错误消息，因为有几个方法在括号中包含一个“主题”，以便样式生效。

我如何更改它以使其正确呈现？

accessControl.component.js

import {connect,useSelector} from "react-redux";
import DataTable from "./userListTable.component";
import {Paper} from "@material-ui/core";

function AdminAccessControl(props) {

    const { children,value,index,...other } = props;

    // select user object from redux
    const user = useSelector(state => state.user);

    // select school object from redux
    const school = useSelector(state => state.diveSchool);

    const classes = useStyles();

    const [role,setRole] = useState({
        userRole: "",});

    const handleChange = (property) => (e) => {
        setRole({
            // override the changed property and keep the rest
            ...role,[property]: e.target.value,});
    }

    return (

        <div className={classes.root}>
            <StyledTabs
                value={value}
                onChange={handleChange}
                indicatorColor="primary"
                textColor="primary"
                aria-label="styled tabs example"
                centered>
                    <StyledTab label="User Access Control" />
                    {/*<DataTable />*/}
                    <StyledTab label="Scuba School Access Control" />
                    {/*<DataTable />*/}
            </StyledTabs>
            <Typography className={classes.padding} />
        </div>
    );
}

function mapStatetoProps(state){
    const { user } = state.auth;
    const { school } = state.diveSchool;
    return {
        user,school,};
}

export default compose(
    connect(
        mapStatetoProps,),withStyles(useStyles)
)(AdminAccessControl);

myJss-style.js

export const useStyles = (theme) => ({

    root: {
        flexGrow: 1,},padding: {
        padding: theme.spacing(3),demo1: {
        backgroundColor: theme.palette.background.paper,demo2: {
        backgroundColor: '#2e1534',});

export const StyledTabs = () => ({
    indicator: {
        display: 'flex',justifyContent: 'center',backgroundColor: 'transparent','& > span': {
            maxWidth: 40,width: '100%',backgroundColor: '#635ee7',})((props) => <StyledTabs {...props} TabIndicatorProps={{ children: <span /> }} />);

export const StyledTab = (theme) => ({
    root: {
        textTransform: 'none',color: '#fff',fontWeight: theme.typography.fontWeightRegular,fontSize: theme.typography.pxToRem(15),marginRight: theme.spacing(1),'&:focus': {
            opacity: 1,})((props) => <StyledTab disableRipple {...props} />);