使用样式系统（和样式组件）在悬停时减轻当前按钮颜色

Question

我正在使用样式系统（带有样式组件）创建一个 Button 组件。

我想创建一个悬停效果，稍微减轻按钮的颜色，不管那个颜色是什么。

例如，让我们想象三个按钮——默认按钮、主按钮和辅助按钮：

<Button>Default</Button>
<Button bg="primary">Primary</Button>
<Button bg="secondary">Secondary</Button>

让我们假设默认颜色是深灰色，主色是绿色，辅助色是蓝色。

所以，如果我将鼠标悬停在默认按钮上，颜色应该是比深灰色稍浅的形式。对于初级，略浅的绿色，对于次级，较浅的蓝色。

但是，我无法弄清楚如何做到这一点？

有任何想法吗？

Answer 1

推荐的方法是使用 styled-system 的buttonStyle变体。

这需要添加buttonStyle系统道具，然后buttons在theme对象上提供比例。请注意，变体是原始 CSS 对象定义，而不是系统道具。

按钮.js

import styled from "styled-components"
import { buttonStyle } from "@styled-system/variant"

export default styled('button')({}, buttonStyle)

主题.js

export default {
  buttons: {
    primary: {
      backgroundColor: "red",
      '&:hover': {
        backgroundColor: "pink" // use polished `lighten`, etc
      }
    }
  }
}

用法：只需指定variant.

<Button variant="primary">Primary Button</Button>

这是 CodeSandbox 演示：https ://codesandbox.io/s/zealous-noether-lxjeu ? fontsize =14

Answer 2

您需要使用一些 css 类。

您可以使用filter: brightness(150%)或自定义淡化颜色。但如果您使用 SASS 或 Less 等 css 预处理器，您就拥有预构建的函数。

例如：

button {
  background: red;
  color: white;
}

.primary {
  background: green;
}

.secondary {
  background: blue;
}

button:hover {
  filter: brightness(150%);
}

<Button>Default</Button>
<Button class="primary">Primary</Button>
<Button class="secondary">Secondary</Button>