Question

是否可以给<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;

Answer 1

是的，您需要做的是在覆盖useStyles部分的

中编写样式。

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

像这样，然后将其传递给Select组件：

<Select className={classes.select} />

像这样

为<选择>选项添加边框

1 个答案: