How to Dynamically Add a Class to Manual Class Names

Hyperstack add dynamic class to manual class names

String interpolation can be done conditionally:

DIV(class: "upload-header text-left #{'uploaded' if FileUploads.complete?}")

The class parameter can also accept an array:

def upload_header_classes
  ['upload-header', 'text-left'].tap do |classes|
    classes << 'uploaded' if FileUploads.complete?
  end
end

DIV(class: upload_header_classes)

I'm sure there are plenty of other ways to do it too, this is ruby!

How to dynamically add classes to NextJS component using class names from CMS?

I assume that you are using tailwind. If so, you cannot inject classnames into an html element. This is because tailwind only includes classes that are explicitly declared somewhere within your code (it will find classes within any string in your project depending on the configuration). You can get around this problem by adding classes to the safelist array in your tailwind.config.js file. You can also safelist classes with regex to allow all variants of certain utilities.

However, safelisting only works if there are a specific set of classes that could potentially be injected. One option, which will be guaranteed to work but NOT RECOMMENDED, is to add a <link> in your html to the tailwind cdn. However this will include every single tailwind class in your css bundle, making it MUCH larger and your website slower.

Another solution is to use inline styles which are calculated with javascript depending on the classes you need to inject. If you are dealing with only simple parts of tailwind (like padding, margin, or other sizing units), this may be a good approach. For example a class like p-4 would get converted to padding: 1rem in your inline styles.

Depending on the needs of your application, one of these three approaches is probably the way to go. Hope this helps!

Adding dynamic class name to list of hard coded classes in React

you can do the following using template strings:

<div className={`${this.state.active ? 'is-active': ''} class1 class2 class3`}>Content</div>

How to dynamically add a class just to one value in li?

You can try   which is a built-in HTML white space. However, that's what I consider a little bit of space, for more space you can apply margin to your li tags.

Thus, in your case you can do something like this:

{{ item.label }}   {{ item.value }}

Update:

Alternatively, for more space you use <pre> tag to pre-format text. It instructs the browser that the text is to appear exactly as written in the HTML file, including any spaces or blank lines. The code would look like this;

<ul>
 <li
  v-for="item in shiftOrderProductivity"
  :key="item"
 ><pre>{{ item.label }} **as much space as you need** {{ item.value }}</pre></li>

How can I change the class of an element dynamically via url in React?

You can do something like that:

function CustomLink({ children, to, ...props }: LinkProps) {
  let resolved = useResolvedPath(to);
  let match = useMatch({ path: resolved.pathname, end: true });

  return (
    <div>
      <Link
        style={{ textDecoration: match ? "underline" : "none" }}
        to={to}
        {...props}
      >
        {children}
      </Link>
      {match && " (active)"}
    </div>
  );
}

const COVER_COLORS = {
  active: 'blue',
  disabled: 'gray',
  warning: 'yellow',
}

const coverClass = (coverStatus) => {
  const variant = COVER_COLORS[coverStatus]
  return variant ? `color-${variant}` : '' // or return a default class
}

...

           <tr key={stateIndex}>
              <td className="td-align-centre">{stateItem.eziTransactionId}</td>
              <td className={coverClass(stateItem.transactionCoverStatus)}>{stateItem.transactionCoverStatus}</td>
              <td>{stateItem.loginDateTime}</td>
              <td>{stateItem.logoutDateTime}</td>
            </tr>