我正在使用 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>
);
}
最佳答案
您看到的是 focused styling对于 AccordionSummary
。您可以在 Accordion demos 中观察到这一点也可以通过单击 Accordion 然后使用 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);
关于reactjs - 为什么在 Material-UI 中的 TextField 中单击时,AccordionSummary 背景会变为灰色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63945217/