Tips on adding conditional styles in Next.js

Question

Tips on adding conditional styles in Next.js

This is my attempt:

function ChangeStrokeToTextAndImage(properties: ChangeStrokeToTextAndImageProps) {
  return (
    <div
      className={
        styles.container0 + " " + properties.isLightGreenBackground == true
          ? styles.isLightGreenBackground
          : " "
      }
    >

If the condition applies, I want to apply styles.container0, and if

properties.isLightGreenBackground

is true, then also apply styles.isLightGreenBackground.

The syntax seems correct, but for some reason the style is not being applied. Any idea why?

css next.js

Answer 1

Answer №1

Enclose the conditional part in parentheses:

function Stroke2TextAndImage(props: Stroke2TextAndImageProps) {
  return (
    <div
      className={
        styles.container0 +
        " " +
        (props.isLightGreenBackground === true
          ? styles.isLightGreenBackground
          : " ")
      }
    >
      ...
    </div>
  );
}

Your current code will be interpreted as follows:

if(Boolean(styles.container0 + " " + props.isLightGreenBackground) === true) 
    styles.isLightGreenBackground
else
    " "

Here is a quick demonstration:

console.log('foo' + ' ' + 'bar' == true ? 'hey' : 'there') // 'there'

console.log('foo' + ' ' + ('bar' == true ? 'hey' : 'there')) // 'foo there'

For more information, please visit: Operator Precedence

_{Recommendation: Consider using a utility library like clsx or classnames if you encounter multiple similar cases to prevent potential issues in the future.}

Answer 2

Enclose the conditional part in parentheses:

function Stroke2TextAndImage(props: Stroke2TextAndImageProps) {
  return (
    <div
      className={
        styles.container0 +
        " " +
        (props.isLightGreenBackground === true
          ? styles.isLightGreenBackground
          : " ")
      }
    >
      ...
    </div>
  );
}

Your current code will be interpreted as follows:

if(Boolean(styles.container0 + " " + props.isLightGreenBackground) === true) 
    styles.isLightGreenBackground
else
    " "

Here is a quick demonstration:

console.log('foo' + ' ' + 'bar' == true ? 'hey' : 'there') // 'there'

console.log('foo' + ' ' + ('bar' == true ? 'hey' : 'there')) // 'foo there'

For more information, please visit: Operator Precedence

_{Recommendation: Consider using a utility library like clsx or classnames if you encounter multiple similar cases to prevent potential issues in the future.}

Tips on adding conditional styles in Next.js

Answer №1

Similar questions

is it possible to adjust the height of a tableRow in mui?

Choose the initial p tag that includes an image, based on the content of another div

What is the reason that Vercel's function log is not displaying console.log?

Tips for sharing a React component with CSS modules that is compatible with both ES Modules and CommonJs for CSS modules integration

Conceal a Component within an Embedded Frame

The CSS in Django seems to be malfunctioning on various pages, particularly on header elements

Crafting a responsible table design with the help of grid layout techniques

The presence of whitespace is causing disruptions in the text alignment within div elements

Adjusting the height of a card in Reactstrap

Manipulating CSS animations through JQuery

The largest contentful paint is anticipating an unidentified event

Misalignment of Font-awesome icons in the footer section

The next-auth/discord callbacks do not make any changes to the data

Which programming language is best suited for this task?

When aligning to the right, input box does not wrap

When refreshing, the useEffect async function will not execute

Customize your webpage's style to reflect your unique identity with user

The issue of causing a "window is undefined error" persists even after attempts to fix it, ultimately rendering it out of scope

What is the best way to manipulate the size and orientation of an image upon hovering over

Gathering information from the server once it has completed its processing phase