有没有办法在React中设置边界不透明度

Question

在React中，有没有一种方法可以在使用导入的主题颜色时设置边框颜色的不透明度？

例如，如果我的css包含：borderBottomColor: theme.palette.primary.main，主题由Material UI使用makeStyles导入，我能以某种方式为此添加不透明度吗？

我知道在rgb格式中，你可以做一些类似borderBottomColor: rgba(255, 0, 0, 0.5)的事情，所以有没有一种方法可以用主题颜色做类似的事情？

Answer 1

alpha值可以通过以下方式添加到主题颜色的末尾：-

borderBottom:`${theme.palette.primary.main+'77'} 1px solid`

值可以从00提供给ff

---

另一种方法是从目录
使用材料ui的colorManipulator实用程序功能

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
*/

以下是工作示例：https://codesandbox.io/s/agitated-chaum-924