在 React 中设置 Spinner Z-index

Question

Hi I am trying to display a spinner on top of every component. On spinner truthy, I reduce the opacity of the parent component. And trying to provide z-index for the spinner. However, the z-index is not applied. Please help me with the css. Thanks

 <div className={`${spinnerIsLoading ? 'parent-grey-out': ''}`}>{children}</>

.parent-grey-out{
    opacity: 0.5 !important;
}

Now there is a child component where the spinner is loaded. I am using useContext to set the spinner true or false.

<div className={`spinner`}>
       LOADING
        </div>

.spinner{
    display: none;
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    z-index: 9999  !important;
    left: 48%;
    top: 45%;
  }

  .spinner:before{
    content: "";
    height: 60px;
    width: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: transparent;
    border: 5px solid #d8d8d8;
    border-top: 5px solid #002569;
    border-right: 5px solid #002569;
    -webkit-animation: 1s linear infinite spin;
    animation: 0.9s linear infinite spin;
    z-index: 9999  !important;
  }
  
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

Answer 1

Where is the spinner in tree?

If you want to display the spinner on top of everything, but still want to keep the spinner inside a component, you could take a look at React Portal

React Portal i usually used for creating modals, but from what I understand from your question, that is what you more or less want to do.