не принимает вариант проп

Question

Интересно, почему <FormControl /> не принимает опору variant. Согласно документам , эта опора доступна.

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"));

Однако это не работает. Вот Песочница, воспроизводящая проблему. https://codesandbox.io/s/material-ui-9ut2q

Answer 1

import React, { useState } 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 = () => {
  const [state, setValues] = useState({
    defaults: "foo"
  });

  const changeValue = e => {
    setValues({ ...state, defaults: e.target.value });
  };
  return (
    <div>
      <FormControl variant="outlined">
        <Select
          value={state.defaults}
          onChange={e => {
            changeValue(e);
          }}
          autoWidth={true}
        >
          <MenuItem value="foo">Kitten</MenuItem>
          <MenuItem value="bar">Puppy</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

render(<App />, document.getElementById("root"));

package.json

{
  "dependencies": {
     "react": "^16.7.0-alpha.2",
     "react-dom": "^16.7.0-alpha.2",
    ...
  },

https://codesandbox.io/s/material-ui-ksggx?fontsize=14

попробуйте это будет работать