It's perplexing to me why <FormControl /> doesn't seem to accept the prop variant. Even though the documentation suggests that this prop is available.
import React from "react";
import { render } from "react-dom";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
const App = () => {
return (
<div>
<FormControl variant="outlined">
<Select value="foo" onChange={() => {}} autoWidth={true}>
<MenuItem value="foo">Kitten</MenuItem>
<MenuItem value="bar">Puppy</MenuItem>
</Select>
</FormControl>
</div>
);
};
render(<App />, document.getElementById("root"));
Despite following the documentation, it simply doesn't function as expected. Here's a Sandbox link where you can see the issue in action: https://codesandbox.io/s/material-ui-9ut2q