How to get my withStyles classes to work in my export class component in my React app

user_12425004 0
Viewed 159

I'm trying to apply styles to my React form. I'm using withStytles from Material UI.

The styles however are not taking into affect. I tried testing the code in my first <DialogContentText> in the code below, but it's not working.

EDIT: edited my code to reflect David's answer.

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

How would I be able to apply these styles to my code below? Thank you for assistance.

material-ui reactjs javascript
1 Answers

TL;DR: You are trying to use a React Hook const classes = useStyles; within a class component. Also, useStyles is a function, not an object.

NL;PR: Hooks only work on functional components (useStyles() hooks are obtained via makeStyles() instead of withStyles()). You apply HOC withStyles(YourComponent) to your class component not your styles, so you can access const {classes, ...rest} = this.props; in the render() method.

It should look like this:

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