JSS如何更改颜色的不透明度 [英] jss how to change opacity for a color
本文介绍了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()
}
这篇关于JSS如何更改颜色的不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文