Question

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

我想创建一个悬停效果，以使按钮的颜色稍微变淡，无论该颜色是什么。

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

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

让我们假设默认颜色是深灰色，原色是绿色，第二色是蓝色。

因此，如果我将鼠标悬停在默认按钮上，则颜色应为深灰色的稍浅形式。对于初级，绿色略淡，对于次级，蓝色。

但是我不知道该怎么做？

有什么想法吗？

Answer 1

您需要使用一些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>

Answer 2

您可以更改元素的不透明度

<!DOCTYPE html>
<html>
<head>
<style>
#green{
background-color:green;
}
.lighten{
opacity:0.6;
}
</style>
</head>
<body>

<button id="green">Green</button>
<script>
var green = document.getElementById("green");
green.onmouseover = function(){
green.classList.add("lighten")
}
green.onmouseleave = function(){
green.classList.remove("lighten")}
</script>
</body>
</html>

Answer 3

推荐的方法是使用样式系统的buttonStyle变体。

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

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

使用样式化系统（和样式化注释）减轻悬停时的当前按钮颜色

3 个答案: