Блог

Я пытаюсь применить стили к своей форме React. Я использую withStytles пользовательский интерфейс из материала.

Однако стили не влияют. Я попытался протестировать код в моем первом <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);
 

Как я смогу применить эти стили к своему нижеприведенному коду? Спасибо за помощь.

TL; DR: Вы пытаетесь использовать перехват React const classes = useStyles; в компоненте класса. Кроме того, useStyles это функция, а не объект.

NL;PR: хуки работают только с функциональными компонентами ( useStyles() хуки получаются через makeStyles() вместо withStyles() ). Вы применяете HOC withStyles(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);