Скопировал код для диалога в material-ui из документации, но не работает, что я делаю не так?

Question

Я скопировал код для функции диалога Material-UI для реакции, но не мог понять, почему это не работает вообще.Нажатие на кнопку контакта даже не приводит к вызову метода handleClickOpen.

Контактная кнопка - это та, которая должна открывать диалоговое окно, весь код диалога копируется из документации материала-пользовательского интерфейса, поэтомуЯ не уверен, как это не могло работать.

export default function Banner() {
  const [open, setOpen] = React.useState(false);

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }
  const classes = useStyles();

  return (
    <Container maxWidth="lg">

      <div className={classes.root}>
        <Grid container spacing={7}>
          <Grid item lg={6} xs={12}>
            <div className={classes.title}>
              <Title content="Freightage Solutions" />
              <br />
              <SubTitle content="A lean, modern, and efficient shipping brokerage." />
              <div className={classes.buttons}>
                <Button ClassName={classes.button} content="Get Started" color='white' />
                <Button ClassName={classes.button} content="Contact Us" color='blue' onClick = {handleClickOpen} />
                <Dialog
                  open={open}
                  onClose={handleClose}
                  aria-labelledby="alert-dialog-title"
                  aria-describedby="alert-dialog-description"
                >
                  <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
                  <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                      Let Google help apps determine location. This means sending anonymous location data to
                      Google, even when no apps are running.
                    </DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={handleClose} color="primary">
                      Disagree
                    </Button>
                    <Button onClick={handleClose} color="primary" autoFocus>
                      Agree
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>
          </Grid>
          <Grid item lg={6} xs={12}>
            <img src={Image} className={classes.image} />
          </Grid>
        </Grid>
      </div>
    </Container>
  );
}

РЕДАКТИРОВАТЬ: Вот пользовательский компонент кнопки я использую

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { styled } from '@material-ui/styles';
import createBreakpoints from "@material-ui/core/styles/createBreakpoints";
import Button from "@material-ui/core/Button"

const breakpoints = createBreakpoints({});


const CustomButton = styled(Button)({
    border: '2px solid #FFFFFF',
    borderRadius: 80,
    height: 48,
    padding: '0 20px',
    textTransform: 'none',
    marginBottom: '20px',
    marginRight: '30px',
    marginLeft: '30px',
    [breakpoints.up("lg")]: {
        marginLeft: '0px',
    },
});

const BlueButton = styled(CustomButton)({
    background: '#0071F7',
    color: 'white',
    '&:hover': {
        background: 'white',
        color: '#0071F7',
    },
});

const WhiteButton = styled(CustomButton)({
    background: 'white',
    color: '#0071F7',
    '&:hover': {
        background: '#0071F7',
        color: 'white',
    }
});

const ButtonType = styled(Typography)({
    fontFamily: 'Ubuntu',
    fontWeight: 450,
});

export default class Title extends React.Component {
  render (){
    if(this.props.color == 'white'){
        return (
            <WhiteButton gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </BlueButton>
        )  
    }
  }
}

Answer 1

Было бы неплохо использовать onClick-prop, которую вы предоставили для своей кнопки CustomButton, и установить ее на кнопку.

export default class Title extends React.Component {
  render () {
    if(this.props.color == 'white'){
        return (
            <WhiteButton onClick={this.props.onClick} gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton  onClick={this.props.onClick}  gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </BlueButton>
        )  
    }
  }

}

Answer 2

вы должны использовать правильный API-интерфейс Button-Material-UI (https://material -ui.com / api / button / )

 <Button  children="Get Started" style={{color:'white'}} />
    <Button  children="Contact Us" style={{color:'blue'}} onClick = {handleClickOpen} />

отметьте это: https://codesandbox.io/s/3fl8r

Answer 3

Согласно API Doc , нет props, называемого content для Button, вместо этого используйте children как,

<Button className={classes.button} children="Get Started" style={{color:'white'}} />
<Button className={classes.button} children="Contact Us" style={{color:'blue'}} onClick = {handleClickOpen} />

Обновление

Вы используете Button name для своего пользовательского компонента, а material-ui также имеет компонент с таким же именем. Поскольку вы используете оба в одном и том же месте, возникает конфликт, а не ошибка material-ui, какой использовать, и ваша функциональность не работает. Это, вероятно, проблема.

Попробуйте изменить имя компонента пользовательской кнопки и проверьте, работает ли он.

Обновление 2

if(this.props.color == 'white'){
        return (
            <WhiteButton gutterBottom>
                <ButtonType>
                    <Button onClick={this.props.onClick}>{this.props.content}</Button> //You forgot to use Button here
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton gutterBottom>
                <ButtonType>
                    <Button onClick={this.props.onClick}>{this.props.content}</Button>
                </ButtonType>
            </BlueButton>
        )  
    }