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

埃里克·罗素

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Sass的背景不透明度没有RGBA

来自分类Dev

有没有一种方法可以在最后一个之前定义的背景上使用不透明度

来自分类Dev

当父元素具有不透明度时,在子元素上禁用不透明度

来自分类Dev

Rmagick在水印中设置透明度不透明

来自分类Dev

有没有办法改变Python igraph中的边缘不透明度?

来自分类Dev

有没有一种方法可以使svg多边形阴影具有不透明度?

来自分类Dev

有没有办法使Google地图标记中的透明度不可点击

来自分类Dev

增量不透明度,需要恒定的不透明度,带有Drawable的图像视图

来自分类Dev

所有浏览器的所有必需的不透明度设置?

来自分类Dev

设置TextView的不透明度

来自分类Dev

有没有办法使用Leaflet有条件地改变多边形的不透明度?

来自分类Dev

有没有办法保持GFM中SVG的透明度

来自分类Dev

有没有办法设置fullScreenCover背景不透明度?

来自分类Dev

使用插件将所有背景图像的不透明度设置为0

来自分类Dev

当父元素具有不透明度时,在子元素上禁用不透明度

来自分类Dev

边框颜色不透明度

来自分类Dev

为什么表单的不透明度没有改变?

来自分类Dev

有没有办法避免不透明性被继承?

来自分类Dev

使不透明度为0的div没有物理尺寸

来自分类Dev

有没有颜色的渐变不透明度可能吗?

来自分类Dev

所有浏览器的所有必需的不透明度设置?

来自分类Dev

设置TextView的不透明度

来自分类Dev

在没有不透明度的覆盖方块中居中文本

来自分类Dev

设置具有不透明度的视差滚动 div

来自分类Dev

不透明度不起作用,即使我没有发现语法错误

来自分类Dev

没有悬停的不透明度过渡

来自分类Dev

如何为 IE 设置边框不透明度?

来自分类Dev

有没有办法在 GNOME 中设置窗口的透明度?

来自分类Dev

带有文本的翻转图像上的 CSS 不透明度,但文本上的不透明度没有变化

Related 相关文章

  1. 1

    Sass的背景不透明度没有RGBA

  2. 2

    有没有一种方法可以在最后一个之前定义的背景上使用不透明度

  3. 3

    当父元素具有不透明度时,在子元素上禁用不透明度

  4. 4

    Rmagick在水印中设置透明度不透明

  5. 5

    有没有办法改变Python igraph中的边缘不透明度?

  6. 6

    有没有一种方法可以使svg多边形阴影具有不透明度?

  7. 7

    有没有办法使Google地图标记中的透明度不可点击

  8. 8

    增量不透明度,需要恒定的不透明度,带有Drawable的图像视图

  9. 9

    所有浏览器的所有必需的不透明度设置?

  10. 10

    设置TextView的不透明度

  11. 11

    有没有办法使用Leaflet有条件地改变多边形的不透明度?

  12. 12

    有没有办法保持GFM中SVG的透明度

  13. 13

    有没有办法设置fullScreenCover背景不透明度?

  14. 14

    使用插件将所有背景图像的不透明度设置为0

  15. 15

    当父元素具有不透明度时,在子元素上禁用不透明度

  16. 16

    边框颜色不透明度

  17. 17

    为什么表单的不透明度没有改变?

  18. 18

    有没有办法避免不透明性被继承?

  19. 19

    使不透明度为0的div没有物理尺寸

  20. 20

    有没有颜色的渐变不透明度可能吗?

  21. 21

    所有浏览器的所有必需的不透明度设置?

  22. 22

    设置TextView的不透明度

  23. 23

    在没有不透明度的覆盖方块中居中文本

  24. 24

    设置具有不透明度的视差滚动 div

  25. 25

    不透明度不起作用,即使我没有发现语法错误

  26. 26

    没有悬停的不透明度过渡

  27. 27

    如何为 IE 设置边框不透明度?

  28. 28

    有没有办法在 GNOME 中设置窗口的透明度?

  29. 29

    带有文本的翻转图像上的 CSS 不透明度,但文本上的不透明度没有变化

热门标签

归档