Trouble with implementing conditional styles in Next JS

<label className={`${darkModeActive ? 'text-brand-five' : 'text-brand-seven'} ${errors.invoiceDate ? 'text-[#EC5756]' : ''}`} htmlFor="invoiceDate">
   Invoice Date
</label>

I am encountering an issue where the text color does not change to red when errors.InvoiceDate is true. The class is applied to the DOM, but the desired effect is not achieved. It seems like there might be some conflict with other classes causing this. Interestingly, if I manually change the color in the code and save the file, it works temporarily until the dev server is restarted. Is there a more effective way to implement this?

cssreactjsnext.jstailwind-css

Answer №1

It's important to only have one class applying the same property and variant at the same time. If both text-brand-five and text-brand-seven are setting the color, they could be conflicting with the text-[#EC5756] class.

Try to have only one of these classes applied to the element simultaneously, for example:

let color = 'text-brand-seven';
if (darkModeActive) {
  color = 'text-brand-five';
} elseif (errors.invoiceDate) {
  color = 'text-[#EC5756]';
}

<label className={color} htmlFor="invoiceDate">

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

What steps can I take to properly position my child element within its parent container?

Is there a way to adjust the width of a child element so it fits snugly inside its parent div? The width should be contained within the padding area. The top and left placement is correct, but the right side needs adjustment. Check out this link for refe ...

htmlcss

Experiencing network request failure on one specific URL while using React Native for iOS, but having no issues with other URLs

I'm facing an issue in my React Native app while trying to make an API call using the following code: test = async () => { try { let a = await fetch('https://rxapitest.alliancepharmacygroup.ca:12345/', { method: 'G ...

iosreactjsreact-nativefetch-api

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

javascripthtmlcss

Trouble with visibility of Bootstrap navbar collapse button

While creating an application using bootstrap, I encountered a problem with the navigation bar. The issue is that when I resize the page, the links disappear and the toggle button fails to show up. Below is my current navigation bar code: <link rel= ...

htmlcsstwitter-bootstrap

Using React MUI Select in combination with react-hook-form does not seem to be compatible with Cypress testing

Within my React application, I have implemented a form that includes a dropdown select. Depending on the option selected from the dropdown, different input fields are rendered. const [templateType, setTemplateType] = useState(""); const { regi ...

reactjstypescriptmaterial-uicypressreact-hook-form

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

javascriptjquerycssangularjs

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

htmlcss

What is the process for retrieving the address of the connected wallet using web3modal?

I've been working on an application using next.js and web3. In order to link the user's wallet to the front-end, I opted for web3modal with the following code: const Home: NextPage = () => { const [signer, setSigner] = useState<JsonRpcSig ...

javascriptreactjsnext.jsweb3js

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

css

Guide on leveraging Next-auth for managing multiple sessions concurrently

I am currently developing an integration tool similar to Zappier. My goal is to utilize Next-auth for connecting to multiple applications and saving their access tokens. However, I have encountered a limitation with Next-auth only allowing for one sessio ...

reactjsnext.jsnext-auth

What could be the reason why the @media print selector is not showing the correct format when I try to print?

When I click the print button, the text is supposed to display in four columns in the print dialog, but it appears as paragraphs instead. This is my script code where there is a click event for the print button. When I click on it, the print dialog pop ...

javascriptjqueryhtmlcss

Utilize the tree element provided by syncfusion in conjunction with Material UI

Currently, I am in the midst of a project that utilizes Material UI. However, I have come across an obstacle when trying to locate a checkboxes tree within Material UI. Surprisingly, I stumbled upon one in Syncfusion. Is it acceptable for me to solely im ...

reactjsmaterial-uisyncfusion

Avoid overflow of a flex element within the <body> tag by ensuring its child with overflowing content takes up 100% of its width

I am facing an issue with my dashboard setup that includes a sidebar. I want the content area to have horizontal overflow scroll, but instead of that, it overflows its parent element. I experimented with flex and grid-template-columns values (1fr 5fr) with ...

css

Trouble loading antd's less styles

In my NextJs project, I have the following file structure: -pages -_app.tsx -app -styles -antdstyles.less Within _app.tsx, I am attempting to import @styles/andstyles.less, which simply imports antd styles like this: @import '~antd/di ...

cssreactjsnext.jslessantd

What is the best way to exclude empty fields from an API response when using the .map() function in Nextjs

I've created a custom repository API that I want to integrate into my Next.js web application. However, if any field in the API is empty, I need to exclude that particular element. The contents of my API: { "myrepo": [ { ...

javascriptnode.jsreactjsnext.js

Having trouble receiving any ringing status in nextjs while utilizing the getstream SDK

I attempted to integrate the getstream video SDK for calling from the caller to the callee. While I can successfully create calls from the caller side, I am not receiving any status updates about the call on the callee side. Below are my codes for the cal ...

javascriptreactjsnext.jsgetstream-io

Next JS rewrites may be functioning smoothly in a local environment, however, they appear to encounter issues after deployment on Verc

Here's a glimpse of my next.config.js configuration => { async rewrites() { return [ { source: '/:path*', destination: `/:path*`, }, { source: '/sell', destination: `${ ...

next.jsfrontendnextjs-rewrites

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Currently, I am working on a project that involves one main component and several child components. These components require custom CSS files as well as additional vendor CSS files. A challenge I encountered is that I cannot use the @import "path/to/css/fi ...

javascriptcssvue.js

Why does my React hook state require two clicks to update properly?

import React, { useState, useEffect } from 'react' import './mobileNavBar.scss' import { div } from 'react-router-dom' import URL from '../../constant/urls' import { openMobileMenu } from 'component/sideMenu/act ...

reactjs

Error: Unable to assign the value of 'setState' property to an object that is not defined. React

After retrieving data from the NYTimes API and logging it to the console, I noticed that my initial state was set as {searchResponse: null}. However, when attempting to set the state with the response using this.setState=({searchResponse:response.data}); a ...

reactjs