Дайте <Select>опциям границу - PullRequest
Новая
       6

Дайте <Select>опциям границу

0 голосов
/ 05 июня 2019

Можно ли задать контейнер опций <Select> границей? Тег <Select> реализует <Popover> с компонентом <Menu>, для которого отображаются параметры <MenuItem> s, но документация не описывает, как этот контейнер может быть стилизован.

Существует возможность применить реквизиты к меню через MenuProps, но в примерах / документации неясно, как к нему можно применить границу.

https://codesandbox.io/s/material-demo-2cdqs?fontsize=14


import ...;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    containerWithBorder: {
      paper: {
        border: "1px solid red"
      }
    }
  })
);

function SimpleSelect() {
  const classes = useStyles();

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          MenuProps={{ // Can this be used to give the options a border? 
            classes: classes.containerWithBorder
          }}
          value={values.age}
          onChange={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>
      </FormControl>
    </form>
  );
}

export default SimpleSelect;

1 Ответ

0 голосов
/ 05 июня 2019

Да, вы должны написать свой стиль в разделе переопределения useStyles 

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    select: {
      border: "1px solid black",
    },
  }),
);

вот так, и тогда вы передадите его компоненту Select: 

<Select className={classes.select} />

как это

...