как исправить кнопку внутри div внутри IonSlide?

Question

У меня есть три компонента внутри IonSlides. Я хотел бы исправить кнопку «Регистрация» компонента в нижней части этого IonSlides. как мне поступить?

Регистрация.tsx:

      <IonContent>
   <IonSlides>
      <IonSlide>
          <Search/>
      </IonSlide>             
      <IonSlide>
          <.../>
      </IonSlide>
      <IonSlide>
          <.../>
     </IonSlide>
  </IonSlides>
</IonContent>

Поиск.tsx:

      ...
return (        
<div>
     <div>  
          <StyledBody>
             ...
          </StyledBody>
        </div>
        <div
            css={css`
                position:sticky;
                bottom:0;
                overflow:inherit;
                `}>
            <StyledButton>
                Registration
            </StyledButton>
       </div>
</div>  
);

Answer 1

Попробуйте добавить этот css в div, содержащий вашу кнопку:

      display: flex;
align-items: flex-end;