我如何使用jsx风格的条件语句与Next.js?

Question

我在Next.js中使用<style jsx>，并希望使用条件语句来样式元素。我也使用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;
}

我想设置padding-top: 56.25%，如果在第一个p标签下有一个iframe标签，但是，如果在第一个p标签下没有iframe标签，我想设置padding-top: 0px;

在css中有使用条件语句的方法吗?

Answer 1

根据nextjs文档，您可以做的是添加样式jsx标记，并按照以下示例进行操作:

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

修改代码中iframe条件的yourConditionHere。