Javascript 如何让我的withStyles类在我的React应用程序的导出类组件中工作

我正在尝试将样式应用到我的表单中。我正在使用Material UI中的

和tyles

但是，这些样式并未生效。我试着在下面的代码中测试我的第一个

中的代码，但它不起作用

编辑：编辑我的代码以反映David的答案

import React, { Component, Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import IconButton from '@material-ui/core/IconButton';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import TextField from '@material-ui/core/TextField';
import FormHelperText from '@material-ui/core/FormHelperText';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
const styles = theme => ({
    formControl: {
      width: 500
    },
    selectEmpty: {
      marginTop: theme.spacing(2),
    },});
  

export default class extends Component {


    state = {
        open: false,
        bucket: {
            name:'',
            category: '',
            about: '',
        }
    }

    handleToggle = () => {
        this.setState({
            open: !this.state.open
        })
    }

    handleChange = name => ({ target: { value } }) => {
        this.setState({
            bucket:{
                ...this.state.bucket,
                [name]: value,
            }
        })
    }

    render() {
        const { open, bucket: { name, category, about } } = this.state;

        const { classes } = this.props;

        return <Fragment>
        <IconButton color="primary" size="large" onClick={this.handleToggle}>
            <AddCircleIcon/>
        </IconButton>
        <Dialog open={open} onClose={this.handleToggle} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Create your Bucket</DialogTitle>
        <DialogContent>
            <DialogContentText>
            Get started! Make your bucket by telling us a little bit more.
            </DialogContentText>
                <form>
                <TextField
                id="filled-password-input"
                label="Bucket Title"
                value={name}
                variant="filled"
                onChange={this.handleChange('name')}
                margin="normal"
                required = "true"
                className = {classes.formControl}
                />
                <br/>
                <br/>
                <FormControl>
                <InputLabel htmlFor="category"> What type of Bucket </InputLabel>
                <Select
                labelId="demo-simple-select-helper-label"
                id="demo-simple-select-helper"
                value={category}
                onChange={this.handleChange('category')}
                required = "true"
                >
                <MenuItem value={'personal'}> Personal </MenuItem>
                <MenuItem value={'social'}> Social </MenuItem>
                </Select>
                </FormControl>
                <FormHelperText>Is this your personal or social Bucket?</FormHelperText>
                <TextField
                id="filled-password-input"
                label="About"
                multiline
                rows="5"
                value={about}
                variant="filled"
                onChange={this.handleChange('about')}
                margin="normal"
                />
                <FormHelperText>Will this be your tech stock watchlist?</FormHelperText>
                <br/>
                <br/>
                </form>
            </DialogContent>
            <DialogActions>
            <Button 
            color="primary"
            variant="raised"
            onClick={this.handleSubmit}
            >
            Create Bucket
            </Button>
        </DialogActions>
        </Dialog>
    </Fragment>  
    }
}
export withStyles(styles)(YourComponent);

import React，{Component，Fragment}来自'React'；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/AddCircle”导入AddCircleIcon；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/Select”导入Select；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/FormControl”导入FormControl；
常量样式=主题=>({
表单控制：{
宽度：500
},
选择空：{
marginTop：主题。间距（2），
},});
导出默认类扩展组件{
状态={
开：错，
桶：{
名称：“”，
类别：“”，
关于：''，
}
}
handleToggle=（）=>{
这是我的国家({
打开：！this.state.open
})
}
handleChange=name=>（{target:{value}}）=>{
这是我的国家({
桶：{
…这个，州，桶，
[名称]：值，
}
})
}
render（）{
const{open，bucket:{name，category，about}}=this.state；
const{classes}=this.props；
返回
创建你的桶
开始吧！多告诉我们一点，让你的梦想成真。




什么类型的水桶
个人的
社会的
这是你的私人生活还是社交生活？
这是你的科技股观察名单吗？




创建桶
}
}
使用样式（样式）（组件）导出；

---

如何将这些样式应用于下面的代码？感谢您的帮助。

TL；DR:您正在尝试使用React Hook

const classes=useStyles在类组件中。而且，
useStyles
是一个函数，而不是一个对象

NL；PR:钩子只对功能组件起作用（
useStyles（）
钩子是通过
makeStyles（）
而不是
withStyles（）
获得的）。将HOC
withStyles（YourComponent）
应用于类组件而不是样式，因此可以访问
const{classes，…rest}=this.propsrender（）
方法中选择code>

应该是这样的：

constyles=theme=>({
表单控制：{
宽度：500
},
选择空：{
marginTop：主题。间距（2），
},});
类YourComponent扩展了PureComponent{
//...
render（）{
const{classes，…rest}=this.props；
//现在您可以访问classes.formControl。。。
}
}
使用样式（样式）（组件）导出；
formControl中有一个打字错误，应该是
宽度
而不是
与
@buzatto一起，谢谢您捕捉到这个打字错误！我原以为这就是解决办法，但结果不是。哦，好吧，我现在明白了，谢谢你的澄清。我已经添加了你的代码，我似乎在底部导出
exportwithstyles（styles）（YourComponent）时出错了，错误为：
意外标记，应为“{”
。我已编辑我的OG帖子，以展示我如何实现您的代码段。感谢您的帮助！trey
导出默认类扩展组件
==>
导出默认类YourComponent扩展组件