CSS Переменные не применяются

Question

Я пытаюсь использовать CSS переменных, но происходит что-то странное. Я объявил переменные так:

:root {
    --primary: '#fff';
    --black: '#1b1f23';
    --gray: '#586069';
    --orange: '#f9826c';
    --logo: '#fff';
    --header: '#24292e';
    --search: 'rgba(255; 255; 255; 0.13)';
}

Затем я использовал их так:

input {
    background: var(--search);
}

Но по какой-то причине стиль не применяется. Когда я наводил указатель мыши на переменную в Chrome Devtools, он показывает мне правильное значение, но не применяется.

I'm pretty lost on how to make it work.

Edit: I'm using React, so this is the render

введите описание изображения здесь

Answer 1

Есть несколько проблем с вашим кодом. Значения переменных не обязательно должны быть строкой. И rgba(255; 255; 255; 0.13) следует разделять запятыми, а не точкой с запятой. Так что это будет rgba(255, 255, 255, 0.13). И стиль применяется; вы просто не заметите разницы, потому что rgba(255, 255, 255, 0.13) по-прежнему белый. Таким образом, правильный CSS для :root будет следующим:

:root {
  --primary: #fff;
  --black: #1b1f23;
  --gray: #586069;
  --orange: #f9826c;
  --logo: #fff;
  --header: #24292e;
  --search: rgba(255, 255, 255, 1);
}

Пример:

:root {
  --primary: #fff;
  --black: #1b1f23;
  --gray: #586069;
  --orange: #f9826c;
  --logo: #fff;
  --header: #24292e;
  --search: rgba(255, 25, 255, 0.5); /* The color is pink so we can actually see it working */
}

input {
  background: var(--search);
}

<input placeholder='Enter Username or Repo...'>