material-ui

问题 when I try to use the dark theme, it turns the text field to white instead of a gray background. Am I doing something wrong ? 1.Create a text field 2.Set the theme to dark import React from "react"; import TextField from "@material-ui/core/TextField"; import { createMuiTheme } from "@material-ui/core/styles"; import { ThemeProvider } from "@material-ui/styles"; const theme = createMuiTheme({ palette: { type: "dark" } }); export default function FilledTextFields() { return ( <ThemeProvider

问题 1. Current Appearance I have a Material UI Grid container with 4 Grid items. Within each Grid item is a Typography component containing a title and a Card with some content, as shown below: 2. Desired appearance I would like the Cards to fill the remaining height of the Grid items and not exceed it. This is my desired output: 3. Undesirable appearance (card height = 100%) I have tried making the height of the Cards 100% but this means each Card takes on the height of its parent (the Grid item

问题 Normally this is how you use Material-UI's Dialog. The code below is taken from Material-UI's docs export default function AlertDialog() { const [open, setOpen] = React.useState(false); const handleClickOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button variant="outlined" color="primary" onClick={handleClickOpen}> Open Dialog </Button> <Dialog open={open} onClose={handleClose}> {...} </Dialog> </div> ); } But I want it to create the Dialog

问题 Normally this is how you use Material-UI's Dialog. The code below is taken from Material-UI's docs export default function AlertDialog() { const [open, setOpen] = React.useState(false); const handleClickOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button variant="outlined" color="primary" onClick={handleClickOpen}> Open Dialog </Button> <Dialog open={open} onClose={handleClose}> {...} </Dialog> </div> ); } But I want it to create the Dialog

问题 Is there any way to programmatically expand and collapse tree items in material ui? I can do that by clicking on the item, but there are other times when I would like to collapse and expand the tree items based on an action in the tree view. is it possible? 回答1: You can achieve that using TreeView expanded prop. The code below expands the TreeItem with id "1" on mount. import React, {useEffect, useState} from 'react'; import TreeView from '@material-ui/lab/TreeView'; import ExpandMoreIcon

问题 Is there any way to programmatically expand and collapse tree items in material ui? I can do that by clicking on the item, but there are other times when I would like to collapse and expand the tree items based on an action in the tree view. is it possible? 回答1: You can achieve that using TreeView expanded prop. The code below expands the TreeItem with id "1" on mount. import React, {useEffect, useState} from 'react'; import TreeView from '@material-ui/lab/TreeView'; import ExpandMoreIcon

问题 I am attempting to create a search match list that updates as the user types in their query. However, I can't figure out how to maintain focus on the input element. The pop-up always gets focussed. I have tried programmatically setting the focus using refs but I cannot give a stateless function component (I'm assuming this is my TextField input) a ref. Here is a gif of the behavior. https://imgur.com/a/JVskedr Notice how the popup steals focus and prevents the user from typing further.

问题 I am attempting to create a search match list that updates as the user types in their query. However, I can't figure out how to maintain focus on the input element. The pop-up always gets focussed. I have tried programmatically setting the focus using refs but I cannot give a stateless function component (I'm assuming this is my TextField input) a ref. Here is a gif of the behavior. https://imgur.com/a/JVskedr Notice how the popup steals focus and prevents the user from typing further.

问题 I am using Select box from material-ui I want to show "select the value" option by default selected but after that user is not able to select this option. <FormControl required className={classes.formControl}> <InputLabel htmlFor="circle">Circle</InputLabel> <Select value={circle} onChange={event => handleInput(event, "circle")} input={<Input name="circle" id="circle" />} > <MenuItem value="" disabled> <em>select the value</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value=

问题 I am using Select box from material-ui I want to show "select the value" option by default selected but after that user is not able to select this option. <FormControl required className={classes.formControl}> <InputLabel htmlFor="circle">Circle</InputLabel> <Select value={circle} onChange={event => handleInput(event, "circle")} input={<Input name="circle" id="circle" />} > <MenuItem value="" disabled> <em>select the value</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value=