用边框半径滚动反应选择溢出答案

【问题标题】：react select with border radius scroll is overflowing用边框半径滚动反应选择溢出
【发布时间】：2020-07-08 02:09:36
【问题描述】：

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

这是我的 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",
  }),
};

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

【问题讨论】：

标签： html css reactjs react-select

【解决方案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和here

【讨论】：