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

CSS styling for the dropdown list in the content/option section

Can someone help me with a simple question I've been researching for hours without success? I'm trying to figure out how to style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this screenshot ...

htmlcssdrop-down-menu

It is essential for each child in a list to be assigned a unique "key" prop to ensure proper rendering, even after the key has been assigned (in Next

Working with Next JS and implementing a sidebar with custom accordions (created as SideAccord.js component). Data is being looped through an array with assigned keys, but still encountering the following error: Warning: Each child in a list should have a u ...

javascriptreactjsnext.jsjsxstyled-components

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website: Upon inspecting the page source, I found the following code snippet: http://jsfiddle.net/o45LLsxd/ <div ng-view="" class="ng-scope"><div class="biogrid ng-scope ...

javascriptangularjshtmlcss

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

Creating a dynamic website with user-friendly editing capabilities

Having a good understanding of html5 and css3, I am currently exploring ways to create a website that enables visitors to edit content in real time for all other users to see. While aware of the contenteditable attribute, I have found that it does not reta ...

javascriptphpjqueryhtmlcss

ways to halt a noise once an animation is complete

I don't have much experience with coding in general, but somehow I've made it this far. Now I'm stuck on the final piece of the puzzle. This is related to a Twitch alert that I'm setting up through 'Stream Elements'. The iss ...

javascripthtmljquerycsshtml5-video

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

javascriptcssnode.jsreactjsbootstrap-5

What are the steps to overlay a button onto an image with CSS?

As a CSS newbie, I have a question that may seem silly or straightforward to some. I am struggling with placing a button over an image and need guidance on how to achieve this effect. Specifically, I want the button to appear like this blue "Kopit" button ...

htmlcss

Using jQuery UI to create sortable lists that are connected and have hidden overflow features

How can I hide overflow from two fixed-height divs containing sortable lists connected to each other without affecting their connection? For example, if overflow is set to hidden, the list item doesn't display when dragged outside of the div. I' ...

javascriptjquerycssjquery-ui

AngularJS allows users to easily select and copy all text from both div and span elements within a specified range. This feature makes it

I am working on implementing a select all feature using AngularJS for text displayed in a structure similar to the one below. Once all the text is selected, users should be able to press ctrl + c to copy it. <div ="container"> <div class="header ...

javascripthtmlcssangularjsjqlite

CSS/HTML: Resolving Internet Explorer's Div Positioning Challenges

I've been struggling to find a resolution for this issue but I haven't been able to come up with anything effective. Here's the basic concept of what I'm trying to achieve. My goal is to have my layout divided into 3 divs. The first se ...

htmlcss

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

I have encountered an issue with a modal view that contains content extending beyond its boundaries. To remedy this, I applied the overflow-y: scroll property. However, the problem arises when the modal view overlaps with the body, which also has scrolling ...

jqueryhtmlcssscroll

Is it possible to implement multer in Next.js without using Express?

import type { NextApiRequest, NextApiResponse } from 'next' import multer from 'multer' const upload = multer({ dest: 'public/uploads/' }) export default async (req: any, res: NextApiResponse) => { // Implementing switch ...

reactjsnext.jsmulter

Is it possible to superimpose a post-type title onto the featured image?

I have crafted this WP_Query to extract the titles and featured images from my post types. <div class="job-cont"> <?php $query = new WP_Query( array( 'post_type' => 'jobs' ) ); if ( $query->have_posts( ...

phpcsswordpressthumbnailstitle

Can Redux toolkit be integrated into the getStaticProps function in Next.js?

When I switch from using getStaticProps to useEffect, I am able to retrieve the data successfully. However, I encountered an issue with getStaticProps stating that hooks can only be used in functional components. import Head from 'next/head' impo ...

reactjsnext.jsserver-side-renderingredux-toolkit

Challenges encountered while constructing a flexbox layout

I have a flexbox design that I am trying to create with the specific layout shown in the image: https://i.sstatic.net/Sy20K.jpg My HTML code is as follows (and I do not want to make any changes to it): <div class="wrapper"> <div class="page-h ...

htmlcssflexboxcss-grid

Tips for adjusting the background color of an ag-grid component in a React application

Looking to make a full background color change in ag-grid within a React application. Experimented with row cell style, but aiming for the entire grid background change. Here is my code snippet: { headerName: "Module Name", field: "ModuleName", ...

cssreactjsag-grid

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

In Next.js 14, the cache cookie is obtained when navigating to pages, but only if there is no hard refresh

I am currently in the process of developing a small booking application using Next.js 14 without implementing any authentication. Within this app, there is a page called /events that displays a list of events, each with a "Book" button that triggers a func ...

reactjsnext.jscookiesserver-side-rendering