在悬停时将透明度应用于内联背景颜色答案

【问题标题】：Apply transparency to inlined background color on hover在悬停时将透明度应用于内联背景颜色
【发布时间】：2017-02-28 21:10:41
【问题描述】：

最初，我有一个样式表，如下所示：

.button {
  border-radius: 3px;
  display: inline-block;
  padding: 14px 20px;
  transition: background-color cubic-bezier(0.4, 0.0, 0.2, 1.0) 300ms;

  &:hover {
    background-color: transparentize($green, 0.2);
  }
}

这很好用。但是，我必须内联我的 backgroundColor 以使其与主题组件一起使用。

import { accent1 } from 'themes/default';

export default function Button({ ...props }, {
  theme: { accent1 } = { accent1 }
}) {
  return (
    <button
      className={styles.button}
      style={{ backgroundColor: accent1 }}
      {...props}
    />
  );
}

但是，使用这种硬编码的背景颜色，我找不到任何方法来赋予它与过渡相同的效果，而无需将其变成具有onMouseEnter 和onMouseLeave 处理程序的完整组件，该处理程序应用@ 987654325@颜色。

有没有更好的方法用 CSS 做到这一点？

【问题讨论】：

你能不使用硬编码的样式，而是在 HTML 页面上写出一段 CSS 来模仿你最初使用自定义类所使用的样式吗？

标签： javascript css reactjs

【解决方案1】：

执行此操作的“正确”（最佳实践）方法是使用 accent1 的值作为类名，并在您的按钮上指定它，如下所示：

<button
  className={styles.button + " " + accent1}
  {...props}
/>

然后在你的 CSS 中，你需要为它创建一个类。所以如果accent1 的值是“exampleClass”，你需要一个这样的CSS块：

.exampleClass {
   background-color: "...";
}

如果您必须保持内联样式，另一种解决方案应该是在悬停样式上放置!important：

&:hover {
   background-color: transparentize($green, 0.2) !important;
}

但是使用!important 通常不是一个好的做法，而且经常会导致难以调试的样式问题。

【讨论】：

【解决方案2】：

相信这更像是一个一般性的 CSS 问题，很可能您不必使用内联样式。哪种风格优先取决于选择器的特殊性。正如您所指出的，切换到内联样式赢得了特异性战争，样式在那个 exact 元素上。

大多数主题库使用像 .btn 或 .header 这样的普通类。原因是——这些很容易击败全局变量。在这里做一个假设，你的主题使用.button 来设置所有按钮的样式。比这更具体，通过在你的类上添加一个类型选择器来赢得特异性战争。这看起来像：

button.button {
  border-radius: 3px;
  display: inline-block;
  padding: 14px 20px;
  transition: background-color cubic-bezier(0.4, 0.0, 0.2, 1.0) 300ms;

  &:hover {
    background-color: transparentize($green, 0.2);
  }
}

CSS 实际上是从右到左处理的。所以这读作，去查找所有具有.button 类的元素。现在选择那些也是按钮元素类型的。这更加具体，并将赢得与常见主题库（如引导程序）的特异性之战。

【讨论】：