reactjs-popup 中模态的样式滚动条

Question

我的 CustomPopup 功能组件中有一个 reactjs-popup：

function CustomPopup({setFalse, item}){return(<Popup open={true} onClose={() => {setFalse(false)}} modal closeOnDocumentClick nested>
{item === "howto" ?
(close => (
  <div className="modal">
    <button className="close" onClick={close}>
      &times;
    </button>
    <div className="header"> HowTo </div>
    <div className="content">
      {'howto'}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
      <br />...

现在我想改变滚动条的样式并尝试了所有我能找到的方法，但似乎没有一个适用。

我试过了：

...将其设置在模态和模态内容中：

  .modal > .content {
width: 100%;
padding: 10px 5px;
height: 750px;
overflow-y: scroll;
scrollbar-color: #6969dd}

...作为通用选择器：

*{
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-base-color: #6969dd;
  scrollbar-face-color: #6969dd;
  scrollbar-track-color: #6969dd;
  scrollbar-gutter: #6969dd;
}

...使用 webkit:

  .modal::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
  }
  
  .modal::-webkit-scrollbar-track {
    background: orange;        /* color of the tracking area */
  }
  
  .modal::-webkit-scrollbar-thumb {
    background-color: blue;    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 3px solid orange;  /* creates padding around scroll thumb */

我正在使用 Edge 和 Chrome。对我来说没有任何效果，我非常感谢每一种新方法。

Answer 1

只需将 Pop-up 组件包裹在 div 中并将这些样式应用到主要 css

div::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #f8fbff;
border-radius: 5px;
 }

div::-webkit-scrollbar-thumb {
background-color: #9fa9bd;
border-radius: 5px;
}
div::-webkit-scrollbar {
width: 0.5em;
border-radius: 5px;
}

reactjs-popup 中模态的样式滚动条

Styling Scrollbar of the modal inside reactjs-popup

css

styles

google-chrome

scrollbar

reactjs