JSS如何更改颜色的不透明度
当前我正在使用以下代码通过JSS向元素添加颜色。
const styleSheet = theme => ({
root: {
backgroundColor: theme.colors.red,
},
})
我想知道是否存在根据颜色添加不透明度的函数theme.colors.red
。
backgroundColor: color(theme.colors.red, .05),
解决方案
物料界面有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)
}
或者,您也可以从NPM添加color库以进行颜色处理:
import Color from 'color';
{
backgroundColor: Color(theme.colors.red).alpha(0.5).string()
}
相关文章