为什么在 Material-UI 中的 TextField 内单击时 AccordionSummary 背景变为灰色？

Question

我正在使用 Material-UI 的 Accordion 和里面的 AccordionSummary 我有一个 <TextField /> （实际上是由 Formik 和 formik-material-ui 控制的），当点击里面时 AccordionSummary 的背景变成灰色仅限字段。我不希望它这样做，而且它似乎不是 Accordion API 配置的任何东西，除非我遗漏了什么。我怎样才能阻止它这样做？

我在Codesandbox 上重新创建了这个问题。

这是沙盒中的完整代码：

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import { TextField, CheckboxWithLabel, Select } from "formik-material-ui";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import FormControl from "@material-ui/core/FormControl";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import AccordionSummary from "@material-ui/core/AccordionSummary";

export default function App() {
  return (
    <div className="App">
      <Formik>
        <Form>
          <Accordion>
            <AccordionSummary>
              <FormControl fullWidth>
                <Field
                  component={TextField}
                  name="itemName"
                  placeholder="What do you want to buy?"
                  variant="outlined"
                />
              </FormControl>
            </AccordionSummary>
            <AccordionDetails>
              <Grid container>
                <Grid item xs={2}>
                  <Box pt={2}>
                    <FormControl fullWidth>
                      <Field
                        component={TextField}
                        name="quantity"
                        label="Qty"
                        type="number"
                        variant="outlined"
                        size="small"
                      />
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={2}>
                  <Box pt={2} pl={1}>
                    <FormControl fullWidth>
                      <Field
                        component={TextField}
                        name="volume"
                        label="Vol"
                        type="number"
                        variant="outlined"
                        size="small"
                      />
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={2}>
                  <Box pt={2} pl={1}>
                    <FormControl label="Type" size="small" fullWidth>
                      <Field
                        component={Select}
                        name="volumeType"
                        as="select"
                        variant="outlined"
                      >
                        <MenuItem value="g">grams</MenuItem>
                        <MenuItem value="kg">kg</MenuItem>
                        <MenuItem value="ml">ml</MenuItem>
                        <MenuItem value="cl">cl</MenuItem>
                        <MenuItem value="litre">litre</MenuItem>
                        <MenuItem value="pint">pint</MenuItem>
                        <MenuItem value="pack">pack</MenuItem>
                      </Field>
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={4}>
                  <Box pt={2} pl={1}>
                    <FormControl fullWidth>
                      <Field
                        component={TextField}
                        name="brandName"
                        label="Brand"
                        variant="outlined"
                        size="small"
                      />
                    </FormControl>
                  </Box>
                </Grid>
                <Grid item xs={2}>
                  <Box pt={2} pl={1}>
                    <Button
                      type="submit"
                      variant="contained"
                      color="primary"
                      disableElevation
                      fullWidth
                    >
                      Add
                    </Button>
                  </Box>
                </Grid>
              </Grid>
            </AccordionDetails>
          </Accordion>
        </Form>
      </Formik>
    </div>
  );
}

Answer 1

您看到的是focused styling 对应AccordionSummary。您也可以在Accordion demos 中观察到这一点，方法是单击一个手风琴，然后使用Tab 键移动到下一个AccordionSummary。这是出于可访问性的原因，以便用户在使用键盘导航时可以知道 Accordion 中的焦点在哪里。

您可以使用以下内容覆盖它：

import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
import { withStyles } from "@material-ui/core/styles";

const AccordionSummary = withStyles({
  root: {
    "&.Mui-focused": {
      backgroundColor: "inherit"
    }
  }
})(MuiAccordionSummary);