What is the syntax for implementing conditional statements within the style jsx of Next.js?

Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling:

<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;
        }

My goal is to dynamically set the padding-top property to 56.25% under certain conditions - specifically when an iframe tag is present under the first p tag. However, if there's no iframe tag under the first p tag, I want to adjust the padding-top to 0px.

I'm curious if there's a method to implement a conditional statement within CSS to achieve this functionality.

cssnext.jsstyled-jsx

Answer №1

According to the details provided in the documentation for nextjs, you can incorporate styling by using the style jsx tag as demonstrated in this code snippet:

<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>

Replace yourConditionHere with the appropriate iframe condition in the code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

javascripthtmlcssangular

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

javascriptjqueryhtmlcssparse-platform

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

javascriptcssnext.jsmaterial-uitreeview

Is it still beneficial to incorporate image sprites in the design of a mobile web app?

As I work on developing a mobile web app, I find myself debating whether to use individual images or stick with image sprites similar to what I do for my desktop site. My main concern is the potential increase in file size from consolidating all the images ...

htmlcssmobile

Implementing Multiple Shared Footers in Rails 3

Looking for a solution to display unique footers in Rails? For instance, displaying one footer on the homepage and another footer on the rest of the site. Has anyone successfully implemented this before? I was considering using an if statement based on th ...

cssruby-on-rails-3footer

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

csswebpacksasslessnext.js

HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

Currently, I'm having some trouble with the appearance of my website. Let me explain: I've written some basic code (Please note that this code includes margins. I'm not sure if this is causing the issue) but the content doesn't display ...

htmlcss

Custom Next.js server-side axios headers with dynamic rewriting capabilities

Is there a way to dynamically set headers for axios on the server-side? I am trying to implement city functionality in NextJS without having to modify the folder structure. Although `Rewrites` from NextJS solves my problem, I am unable to configure the hea ...

urlnext.jsaxiosserver-side-renderingnextjs-rewrites

Ensure that the HTML image and text are positioned side by side, with the text appearing alongside the picture rather than below

Looking for a way to keep the text aligned to the right of an image, regardless of length? Check out this exercise: https://www.example.com/css/exercise-1 Is there a method to maintain the text layout next to an image while accommodating varying amounts o ...

htmlcss

Use flex-grow and flex-wrap to split elements onto separate lines

My parent div, ".tags", contains both links and a title. The parent div is styled with "display: flex;" and "flex-wrap: wrap;". I want the link elements to move onto a new line when they wrap, without being pushed to the right of the screen by the title. ...

htmlcssflexbox

How to implement bi-directional scroll animation in JavaScript for top and bottom movements

In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...

javascripthtmlcssanimation

Exploring the world of end-to-end testing for playwright. How to handle oauth2 and email-passwordless authentication in your testing

As I delve into e2e testing with Playwright, I've encountered a challenge. The application I need to test can only be accessed through Github OAuth or email authentication links, managed by next-auth in a NextJS project. I'm unsure how to approa ...

reactjsnext.jse2e-testingplaywrightnext-auth

Help needed with debugging CSS for IE6 >_<

I have been working on the following website: www.darksnippets.com While the design looks good on Firefox and Chrome, it appears terrible on IE6. For example, on the home page and other pages like , the width is too wide in IE6. I've been unable to ...

cssinternet-explorer-6

What are the steps to implement character movement in a 2D game using JavaScript?

I'm having trouble getting the image with the ID "yoshi" to move around in my 2D game document.onkeydown = (e) => { if (e.keyCode == 37) yoshi.style.left = yoshi.offsetLeft - 5 + "px"; else if (e.keyCode == 38) yoshi.style.top = yoshi.offset ...

javascripthtmlcss

Expanding the header in Ionic 3 with a simple click event

I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF: However, I am facing an issue where I want to expand the header on click instead of o ...

htmlcsstypescriptionic-frameworkangular5

What is the correct method for dynamically importing framer-motion in NextJS?

I am currently utilizing framer-motion in my NextJS project. My goal is to import {motion} using Next's dynamic import method. However, I am encountering difficulties as it does not seem to function properly. import { motion } from "framer-motion ...

javascriptnext.jsframer-motiondynamic-import

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

After extensive research through various online resources, I have yet to find a solution to my specific CSS layout inquiry regarding "3 equal-height columns with a 'really' sticky footer". The desired layout includes the following components: ...

htmlcss

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

javascripthtmlcss

When a 404 error is thrown in the route handlers of a Next.js app, it fails to display the corresponding 404 page

I am encountering an issue with my route handler in Next.js: export async function GET(_: Request, { params: { statusId } }: Params) { const tweetResponse = await queryClient< Tweet & Pick<User, "name" | "userImage" | &q ...

typescriptnext.jshttp-status-code-404custom-error-pages

How do I ensure my Instrument Cards maintain dynamic sizing while also defining a minimum card size with React-Bootstrap?

Let's talk about my current situation This is how my cards are currently set up: Looks good, right? However, when you adjust the screen size, it looks like this: Not so great, especially in today's responsive design standards. I want the card ...

reactjsbootstrap-4next.jsreact-bootstrap