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

Question

我正在尝试将样式应用于我的 React 表单。我正在使用withStytlesMaterial UI。

然而，这些风格并没有受到影响。我尝试在<DialogContentText>下面的代码中首先测试代码，但它不起作用。

编辑：编辑我的代码以反映大卫的回答。

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

我如何能够将这些样式应用到下面的代码中？谢谢你的帮助。

标签： javascriptreactjsmaterial-ui

Answer 1

TL;DR：您正在尝试const classes = useStyles;在类组件中使用 React Hook。此外，useStyles是一个函数，而不是一个对象。

NL;PR：钩子仅适用于功能组件（useStyles()钩子是通过makeStyles()而不是获得的withStyles()）。您将 HOCwithStyles(YourComponent)应用于您的类组件而不是您的样式，因此您可以const {classes, ...rest} = this.props;在render()方法中访问。

它应该如下所示：

const styles = theme => ({
    formControl: {
      width: 500
    },
    selectEmpty: {
      marginTop: theme.spacing(2),
    },});

class YourComponent extends PureComponent {
//...
 render(){
    const {classes, ...rest} = this.props;
// now your can access classes.formControl ...
 }
}

export withStyles(styles)(YourComponent);