当我们在 safari 浏览器上单击它们时，网格项目正在改变位置 react material-ui

Question

我正在处理 React MATERIAL-UI 项目我遇到了网格项的问题，但这个问题只发生在 safari 浏览器中，而不是在 chrome 或 firefox 中。

我有一个网格，在网格内部，当我单击复选框时，我有复选框，然后复选框从一个位置移动到另一个位置，这只发生在 safari 浏览器中。

我在 youtube 上上传了一个视频来解释这个问题，它只有 20 秒的视频 https://youtu.be/dGdayLJgLCE

请观看视频直到最后才能看到问题。

<Box mt={6}>
          <Container
            maxWidth="md"
          >
            <Grid container justify="space-around" alignItems="center"  >
              {_map(_omit(activities, "other"), (selection, activity) => {
                const handleClick = experienceLevel => () =>
                  toggleExperience(experienceLevel, activity);
                return (
                  <Box m={1} key={activity}>
                    <Grid
                      item
                      container
                      // justify="left"
                      // alignItems="left"
                      justify="center"
                      alignItems="center"
                      direction="column"
                      className={classes.item}
                      wrap={"nowrap"}
                      style={{ width: "100%" }}
                    // shrink={false} 
                    >
                      <Typography variant="h5" component="h5" gutterBottom>
                        {activity}
                      </Typography>
                      <FormGroup>
                        <FormControlLabel
                          control={
                            <Checkbox
                              checked={selection === "beginner"}
                              onChange={handleClick("beginner")}
                              name="beginner"
                            // shrink={false} 
                            />
                          }
                          label="beginner"
                        />
                        <FormControlLabel
                          control={
                            <Checkbox
                              checked={selection === "intermediate"}
                              onChange={handleClick("intermediate")}
                              name="intermediate"
                            // shrink={false} 
                            />
                          }
                          label="intermediate"
                        />
                        <FormControlLabel
                          control={
                            <Checkbox
                              checked={selection === "advanced"}
                              onChange={handleClick("advanced")}
                              name="advanced"
                            // shrink={false} 
                            />
                          }
                          label="advanced"
                        />
                      </FormGroup>
                    </Grid>
                  </Box>
                );
              })}
            </Grid>
            <Grid container justify="center" alignItems="center">
              <Box mt={3} className={classes.textFieldContainer}>
                <Typography variant="body1" component="h3" gutterBottom>
                  Describe the other activities you are interested in:
              </Typography>
                <TextField
                  fullWidth
                  id="outlined-multiline-static"
                  multiline
                  rows="4"
                  placeholder="Let us know!"
                  variant="outlined"
                  color="secondary"
                  onChange={handleChange}
                />
              </Box>
            </Grid>
          </Container>
        </Box>
        <NextBtn
          disable={_includes(activities, false)}
          href="/registration/14"
        />

请告诉我如何解决此问题。

Answer 1

你可以尝试把它放在 CSS 中，看看这是否有效： -webkit-appearance: none!important;