JSS如何更改颜色的不透明度

问题描述

当前我正在使用以下代码通过JSS向元素添加颜色。

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

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

推荐答案

物料界面有colorManipulatorutility 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)
}

或者，您也可以从NPM添加color库以进行颜色处理：

import Color from 'color';

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