javascript - jss如何改变颜色的不透明度

Question

目前我正在使用以下代码使用 jss 为元素添加颜色。

const styleSheet = theme => ({
  root: {
     backgroundColor: theme.colors.red,
  },
})

我想知道是否存在基于颜色theme.colors.red 添加不透明度的函数。

示例 smt 如下:backgroundColor: 颜色(theme.colors.red, .05),

Answer 1

Material UI 有一个colorManipulator utility file ，其中包括一个 alpha 函数:

import { alpha } from '@material-ui/core/styles/colorManipulator';

/**
 * Sets the absolute transparency of a color.
 * Any existing alpha values are overwritten.
 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
 * @param {number} value - value to set the alpha channel to in the range 0 - 1
 * @returns {string} A CSS color string. Hex input values are returned as rgb
 */

{
    backgroundColor: alpha(theme.colors.red, 0.5)
}

对于 Mui v5:

import { alpha } from "@mui/material";

---

或者，您可以添加 color来自 npm 的颜色操作库:

import Color from 'color';

{
    backgroundColor: Color(theme.colors.red).alpha(0.5).string()
}