Having the next Material UI Select, I've found that one can modify its behavior and appearence.
import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
class SimpleSelect extends React.Component {
state = {
age: 10
};
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
}
export default SimpleSelect;
This is the above one with MenuProps added, also a sandbox where I'm playing with it.
import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
class SimpleSelect extends React.Component {
state = {
age: 10
};
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
}
export default SimpleSelect;
My question is: where can I find all the possible attributes (like anchorOrigin, transformOrigin, etc) available for it?
I want to make the dropdown wider and also to add checkboxes for each dropdown item but I don't know what MenuProps attributes to access.