Tengo un componente funcional React en el que tengo un botón y estoy comprobando si el botón está en la ventana gráfica o no, y lo estoy almacenando como un valor booleano en "isElementVisible".
Quiero hacer un estilo condicional aquí, si isElementVisible === false entonces quiero que sea pegajoso, de lo contrario déjalo como está.
estilo deseado cuando isElementVisible === false :
.apply-btn{ margin: 0; width: 100%; @include media-breakpoint-up(lg) { width: 17rem; } @media (max-width: 599px) { position: fixed; bottom: 0; width: 50%; text-align: center; left: 50%; } }Componente:
/* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access */ import React, { useEffect, useState } from 'react'; const CalcOutput = (): JSX.Element => { const [isElementVisible, setIsElementVisible] = useState(false); const applyNowButton = document.getElementById('calc-applyNowBtn'); const isElementInViewPort = (element: HTMLElement) => { const rect = element.getBoundingClientRect(); return( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } const handleScroll = (event: Event) => { if(applyNowButton !== null) { const isVisible = isElementInViewPort(applyNowButton) isVisible ? setIsElementVisible(true) : setIsElementVisible(false); } }; window.addEventListener('scroll', handleScroll); return ( <button className="apply-btn" id="calc-applyBtn"> Apply </button> ); }; export default CalcOutput;Podría crear otra clase css (llamada apply-btn-sticky por ejemplo) que se aplica cuando se cumple una condición:
.apply-btn-sticky { @media { position: sticky; } } y luego configure el className para su botón según esa condición:
<button className={this.isElementVisible ? "apply-btn" : "apply-btn apply-btn-sticky" id="calc-applyBtn"> Apply </button> Puede reutilizar gran parte del estilo de su clase apply-btn ya que todo lo que desea cambiar es hacer que la posición sea fija.
Como ya se respondió, puede usar operadores ternarios. Pero si ya tiene varias clases aplicadas y desea que una clase sea condicional, puede usar cadenas de plantilla.
<div className={`btn btn-primary ${isActive ? 'active' : ' '}`}> ... </div>puede hacer esto con operadores ternarios, como puede ver en el siguiente código.
<div className={!isElementVisible ? 'sticky' : 'navbar'} />