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);
}

但由於某種原因，該樣式未被應用。 當我 hover 將鼠標懸停在 Chrome Devtools 中的變量上時，它會顯示正確的值，但它不適用。

我很不知道如何使它工作。

編輯：我正在使用 React，所以這是渲染<input />

Answer 1

您的代碼存在一些問題。 變量值不需要是字符串。 並且rgba(255; 255; 255; 0.13)應該用逗號分隔，而不是分號。 所以那將是rgba(255, 255, 255, 0.13) 。 並且正在應用樣式； 您只是無法注意到差異，因為rgba(255, 255, 255, 0.13)仍然是白色的。 因此:root的正確 CSS 將是：

: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...'>