Передача переменной в css в качестве заголовка

Question

Я вижу, что вы можете создавать "переменные" внутри css:

https://www.w3schools.com/cssref/func_var.asp

Мои файлы:

(style.css file)

[title~=--myVariable] {
    color: red
}

(App.js file)
...
return (
    <div className="App">
      <h1 title="thisIsTheTitle"> Some text in red color ? </h1>
    </div>
  )

Можно ли сделать так, чтобы, если у моего заголовка был заголовок, в противном случае остался бы красный цвет (черный)

ОБНОВЛЕНИЕ Я забыл инициализировать myVariable, поэтому:

(style.css file)

:root {
  --myVariable: white;
}

Answer 1

Чтобы ответить на этот вопрос:

Можно ли сделать так, чтобы, если у моего заголовка есть заголовок, тогда цвет был бы красным, в противном случае остается (черный)

(стиль. css файл)

.App h1 {
    color: black;
}

.red {
    color: red;
}

(Приложение. js файл)

...
function App({ headerTitle }) {
return (
    <div className="App">
      <h1 title={ headerTitle }
     className={headerTitle ? 'red' : null } > 
        Some text in red color ? </h1>
    </div>
  )
}

Answer 2

вы можете установить откат с помощью css var ().

однако обратите внимание:

Функция var () не может использоваться в именах свойств, селекторах или чем-либо еще, кроме значений свойств MDN

обновление: я видел, что вы редактируете, так как приведенная выше цитата не будет работать.