反应 select 与边界半径滚动溢出

Question

我在我的菜单上做了一个带有边框半径和最大高度的 react-select。问题是滚动条背景溢出隐藏了菜单边框

这是我的 css:

export const customStyles = {
  option: (provided, state) => ({
    ...provided,
    color: "#969696",
    backgroundColor: "white !important",
    boxShadow: "none",
    borderColor: "#969696",
    paddingTop: 0,
    paddingBottom: 0,
    "&:hover": {
      fontWeight: "bold",
    },
  }),
  menu: (provided) => ({
    ...provided,
    width: "100%",
    borderRadius: "0px 0px 17.02px 17.02px",
    marginBottom: 0,
    boxShadow: "none",
    marginTop: 0,
    border: "1px solid #969696",
    maxHeight: "33vh",
    borderTop: 0,
  }),
  menuList: (provided) => ({
    ...provided,
    boxShadow: "none",
    borderRadius: "0px 0px 17.02px 17.02px",
    paddingTop: 0,
    paddingBottom: 0,
  }),
  control: (provided, state) => ({
    ...provided,
    boxShadow: "none",
    borderRadius: state.menuIsOpen ? "17.02px 17.02px 0px 0px" : "17.02px",
    borderColor: state.menuIsOpen ? "#969696" : "#5776FF",
    borderBottom: state.menuIsOpen ? 0 : "",
    "&:hover": {
      borderColor: "#969696",
    },
  }),
  dropdownIndicator: (provided, state) => ({
      ...provided,
      color: "#979797",
  }),
  container: (provided) => ({
    ...provided,
    width: "100%",
  }),
  valueContainer: (provided) => ({
    ...provided,
  }),
  indicatorSeparator: () => ({
    display: "none",
  }),
};

我试图给滚动条添加边框半径，但它让他消失了...

Answer 1

您可以为 menu

提供隐藏的溢出

menu: (provided) => ({
    ...provided,
    width: "100%",
    borderRadius: "0px 0px 17.02px 17.02px",
    marginBottom: 0,
    boxShadow: "none",
    marginTop: 0,
    border: "1px solid #969696",
    maxHeight: "10vh",
    borderTop: 0,
    overflow : 'hidden' //<---- like this
  }),

或者，您可以参考一些解决方案here and

反应 select 与边界半径滚动溢出

react select with border radius scroll is overflowing

html

css

reactjs

react-select