使用Styled-System (和styled-compoments)淡化悬停上的当前按钮颜色

Question

我正在使用styled-system (带有styled-components)创建一个Button组件。

我想创建一个悬停效果，使按钮的颜色稍微变亮，而不管是什么颜色。

例如，假设有三个按钮--一个默认按钮、一个主按钮和一个辅助按钮：

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

让我们想象一下，默认颜色是深灰色，主色是绿色，次色是蓝色。

因此，如果我将鼠标悬停在默认按钮上，颜色应该是深灰色的稍微浅一些的颜色。对于主要的，稍微亮一点的绿色，对于次要的，浅蓝色。

不过，我不知道该怎么做？

有什么想法吗？

Answer 1

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

这需要添加buttonStyle系统属性，然后在theme对象上提供buttons scale。请注意，变体是原始的CSS对象defs，而不是系统属性。

Button.js

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

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

theme.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或更小的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>

​