javascript - 将透明度应用于悬停时的内联背景颜色

Question

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

.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 和 将它变成一个完整的组件的情况下，通过过渡赋予它相同的效果应用 rgba 颜色的 onMouseLeave 处理程序。

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

Answer 1

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

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

然后在您的 CSS 中，您需要为其创建一个类。因此，如果 accent1 的值为“exampleClass”，您需要这样的 CSS block :

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

如果您必须保持内联样式，另一个可行的解决方案是将 !important 放在悬停样式上:

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

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