How to Add a Classname to a CSS Variable

Can I add a classname to a CSS variable?

That's frankly the best (as in most idiomatic) approach — the use of class names, if not altogether separate stylesheets (as has been tradition for many, many years), to theme entire layouts via custom properties. It's the most "fundamentally CSS" approach with JavaScript merely being the glue that makes the theme switching work. You really can't do much better than that.

For those unaware what :root means and wondering where exactly the class names are being applied, it's the html element (the parent of body). So there is nothing special going on here — you're simply switching class names on the html element. It just happens that global custom properties are conventionally defined for the document root element since it's at the top level of the inheritance chain.

If you have any theme-agnostic custom properties, as well as style properties (i.e. not custom properties) that apply to the root element, keep them in their own unqualified :root rule, separate from your themed custom properties, so they won't be affected by theme switching. Here's an example:

const root = document.documentElement;
// Default theme - should assign declaratively in markup, not JS// For a classless default theme, move its custom properties to unqualified :root// Again, keep it separate from the other :root rule that contains non-theme props// Remember, the cascade is your friend, not the enemyroot.classList.add('white');
document.querySelector('button').addEventListener('click', function() {  root.classList.toggle('white');  root.classList.toggle('black');});

:root {  --spacing: 1rem;  color: var(--col);  background-color: var(--bgcol);}
:root.white {  --bgcol: #FFF;  --col: #000;}
:root.black {  --bgcol: #000;  --col: #FFF;}
p {  margin: var(--spacing);  border: thin dashed;  padding: var(--spacing);}

<button>Switch themes</button><p>Hello world!

using a variable value on css modules class name

Not sure what you are trying to achieve.

One solution could be to do :

const type = 'red';

<div className={`${styles.background} ${styles.type}`}></div>

However if you want to use BEM and the -- notation. You' might have to switch to brackets notation.

const type = '--red';

<div className={`${styles.background} ${styles[type]}`}></div>

Adding a className using variables (HTML, ReactJS)

You can use it like:

<div className={`${classes} added-classname`}>

Refer template literals.

Next.js Css className with Variables. How to change/convert into css module className?

I decided to add this code to serve other people who encounter the same problem.
If we're keeping the same class names in our *.module.css file then the solution looks like this:

className={`${styles.btn} ${styles[checkButtonStyle]} ${styles[checkButtonSize]}`}

How do you insert a variable class name in Material UI?

I think what you need to do is this:

const getRAG = (ragStatus) => {
  const rag = ragStatus.toString().toUpperCase();

  if (rag.startsWith("R") || rag.startsWith("A") || rag.startsWith("G")) {
    return rag[0];
  }

  return "U";
};

const RAGChip = ({ ragStatus }) => {
  const classes = useStyles();
  const defineClass = `rag${getRAG(ragStatus)}`;
  return (
    <Chip
      size="small"
      label=""
      className={`${classes.ragChip} ${classes[defineClass]}`}
    />
  );
};

How to add CSS class name from variable in Angular 9 depends on boolean variable?

Did you try doing this?
https://stackblitz.com/edit/angular-ngclass-nbleik

 <div [class]="inputBlockClass" [ngClass]="showLabel?inputBlockExtraClass:''">>
      sometext
 </div>

Add custom CSS class via variable to returned jsx

its like inserting a string inside another or adding them together. You can use classname={"yourclasse" + theDynamicClass} or className={yourClass ${dynamicClass}} (inbetween ``)

NextJs css modules - variable in className

CSS Modules locally scope CSS by automatically creating a unique class name, that means that if your Style.module.css is something like this :

.logo1{
  // some css rules
}

.logo2{
  // some css rules
}

Next will generate for each class name (logo1,logo2 ecc..) a unique classname different from the one provided inside Style.module.css

Basically Styles is an object with the class names as keys and the unique class names generated by next.js as property.
This mean that you have to grab the class name in this way className={Style[`logo${numIn}`]}:

import Style from './css/Style.module.css'

    function component() {
      return (
      <div>
       {[...Array(7)].map((e, i) => {
           const numIn = i + 1
           return (
               <img className={Style[`logo${numIn}`]} src='/assets/svg/logo.svg' alt="" key={i} />
           )
       })}
    </div>
    )
    }

Note that the rendered html will have different class names but with the right css rules.

---

Related Topics