Блог

У меня есть настраиваемое свойство css, содержащее значение цвета темы : var(--themeColor) .

И я хочу проверять значение цвета темы всякий раз, когда это происходит white , тогда я могу изменить значение background-color на другое значение.

Например:

 .btn {
    background-color: var(--themeColor) == "white" ? "red" : var(--themeColor);
}
  

Вы можете прочитать значение переменной css, используя этот фрагмент js:

 getComputedStyle(document.documentElement).getPropertyValue('--themeColor').trim();
  

Итак, с помощью styled-components вы можете выполнить этот троичный операторный тест, чтобы получить цвет:

 .btn {
    background-color: ${getComputedStyle(document.documentElement).getPropertyValue('--themeColor').trim() === "white" ? "red" : "var(--themeColor)"};
}