How can I use conditional statement in style jsx with Next.js?

Question

I am using <style jsx> in Next.js and would like to style an element with conditional statement. I am also using tailwindCSS:

<div
className="mt-20 description_content text-center flex flex-col justify-center items-center text-gray-500 mx-5"
dangerouslySetInnerHTML={{
__html: productDetail?.description,}}>
</div>

        .description_content p:first-child {
          position: relative !important;
          overflow: hidden !important;
          width: 100% !important;
          padding-top: 56.25% !important; /* if there is no iframe tag as a child, it should be padding-top: 0px; */
        }

        .description_content p iframe {
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          bottom: 0 !important;
          right: 0 !important;
          width: 100% !important;
          height: 100% !important;
          margin: 0 auto !important;
        }

I would like to set up padding-top: 56.25% if there is a iframe tag under first p tag, however, if there's no iframe tag under first p tag, I would like to set up padding-top: 0px;

Is there a way to use conditional statement in css?

Answer 1

As per nextjs documentation, what you can do is add the style jsx tag and do it as in this example:

<div
className="mt-20 description_content text-center flex flex-col justify-center items-center text-gray-500 mx-5"
dangerouslySetInnerHTML={{
__html: productDetail?.description,}}>
<style jsx>{`
 .description_content p:first-child {
   padding-top: ${yourConditionHere ? '56.25%' : '0'};
  }
`}</style>
</div>

Change yourConditionHere for the iframe condition in the code.