Reactjs 具有样式的材料UI不'；我不应用任何类型的样式

我在

材质UI

中使用了

AppBar

中的示例，我只是将其从函数更改为类组件，然后我研究了如何使用

样式，我做了完全相同的事情，但无论我做什么，以及我做了什么样的更改，都不会应用样式。

“react”：“^16.8.6”，


“@material ui/core”：“^4.1.2”，


“@material ui/icons”：“^4.2.1”，

import React, {Component}  from 'react';
import styleClasses from './SideDrawer.module.css';
import { withStyles } from '@material-ui/styles';
import PropTypes from 'prop-types';

// import UIManager from '../../UIManager/UIManager';

import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

import { fade, makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';

const useStyles = makeStyles(theme => ({
    grow: {
        flexGrow: 1,
        zIndex: 1000,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        display: 'none',
        [theme.breakpoints.up('sm')]: {
            display: 'block',
        },
        color: 'red'
    },
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
        },
        marginRight: theme.spacing(2),
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing(3),
            width: 'auto',
        },
    },
    searchIcon: {
        width: theme.spacing(7),
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputRoot: {
        color: 'inherit',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 7),
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('md')]: {
            width: 200,
        },
    }
}));



class SideDrawer extends Component {

    render () {       
        const { classes } = this.props;

        console.log('classes', classes)

        return (            
            <div className={styleClasses.grow}>                
                <AppBar className={'SideDrawer-inputInput-14'}>
                    <Toolbar>
                        <IconButton
                            edge="start"
                            className={classes.menuButton}
                            color="inherit"
                            aria-label="Open drawer"
                        >
                            <MenuIcon />
                        </IconButton>

                        <Typography className={classes.title} variant="h6" noWrap>
                            Test
                        </Typography>

                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>

                            <InputBase
                                placeholder="search..."
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput,
                                }}
                                inputProps={{ 'aria-label': 'Search' }}
                            />
                        </div>
                        <div className={classes.grow} />
                    </Toolbar>                    
                </AppBar>

            </div>
        )
    }
}

SideDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(useStyles)(SideDrawer);

但这些样式都不会应用于实际项目或
AppBar
。我做错了什么？
您不应该尝试将
makeStyles
与
withStyles
一起使用
makeStyles
返回一个自定义钩子，将此自定义钩子传递到
withStyles
将无法正常工作

相反，您需要以下内容：

const styles = theme => ({
    grow: {
        flexGrow: 1,
        zIndex: 1000,
    },
    /* and all your other styles ... */
});

// other stuff (e.g. your SideDrawer component) ...

export default withStyles(styles)(SideDrawer);

您不应该尝试将
makeStyles
与
withStyles
一起使用
makeStyles
返回一个自定义钩子，将此自定义钩子传递到
withStyles
将无法正常工作

相反，您需要以下内容：

const styles = theme => ({
    grow: {
        flexGrow: 1,
        zIndex: 1000,
    },
    /* and all your other styles ... */
});

// other stuff (e.g. your SideDrawer component) ...

export default withStyles(styles)(SideDrawer);

我懂了！抱歉，我对整个material UI有点陌生，顺便说一句，我在
marginRight:theme.spacing上得到了错误
“TypeError:theme.spacing不是一个函数”
，marginRight:theme.spacing（2）
，当我不使用makeStyle时，我如何使用主题的空间？谢谢。你应该从“@material UI/core/styles”导入
（而不是“@material ui/styles”）以使默认主题自动可用。哇，它成功了，我真的没想到会有第二个
样式
，你解决了我的两个问题，谢谢！我明白了！很抱歉，我对整个material ui有点陌生，顺便说一句，我得到了错误
“TypeError:theme.spacing不是一个函数”
第行
marginRight:theme.spacing（2）
，我不使用makeStyle时如何使用主题的空间？谢谢。您应该从“@material ui/core/styles”（而不是“@material ui/styles”）导入
with styles
）为了让默认主题自动可用。哇，它成功了，我真的没想到会有第二个
样式
，你解决了我的两个问题，谢谢！