在React中,有没有一种方法可以在使用导入的主题颜色时设置边框颜色的不透明度?
例如,如果我的CSS包括:borderBottomColor: theme.palette.primary.main
通过Material UI使用makeStyles导入主题,我可以以某种方式为此添加透明度吗?
我知道以rgb格式可以做类似的事情borderBottomColor: rgba(255, 0, 0, 0.5)
,有没有办法用主题颜色做类似的事情?
可以通过以下方式在主题颜色的末尾添加一个alpha值:-
borderBottom:`${theme.palette.primary.main+'77'} 1px solid`
可从提供的值00
,以ff
另一种方法是colorManipulator
从目录使用material-ui的实用程序功能
import { fade } from '@material-ui/core/styles/colorManipulator';
并像这样使用它:
borderBottom : `${fade(theme.palette.primary.main, 0.5)} 1px solid`
淡入接受两个值。
/**
* Set 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()
* @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
*/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句