jss如何改变颜色的不透明度

Posted 2023-02-22

【中文标题】jss如何改变颜色的不透明度

【英文标题】：jss how to change opacity for a color

【发布时间】：2018-04-26 09:22:13

【问题描述】：

目前我正在使用以下代码使用 jss 为元素添加颜色。

const styleSheet = theme => (
  root: 
     backgroundColor: theme.colors.red,
  ,
)

我想知道是否存在基于 colortheme.colors.red 添加不透明度的功能。

示例 smt 像： backgroundColor: color(theme.colors.red, .05),

【问题讨论】：

从我从文档中可以看出，你不能只设置opacity 属性吗？ github.com/cssinjs/cssinjs/search?utf8=&q=opacity&type=

不透明度适用于我需要的所有元素，而只需更改背景颜色内的值

假设我正确理解了这个问题，您应该删除jss 标签

【参考方案1】：

Material UI 有一个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()

【讨论】：

这个答案中的解决方案现在在最新的 Material-UI 中已弃用。使用alpha 而不是fade

对于Mui v5，你需要添加这个代码：import alpha from "@mui/material";

对于 Mui v4：import alpha from '@material-ui/core'

【参考方案2】：

其中一些答案引用了已弃用的 Material-UI 函数。目前首选的方法是使用alpha:

import  alpha  from "@material-ui/core";

...
                 // yields rgba(255,255,255,0.85)
backgroundColor: alpha(theme.palette.background.paper, 0.85) 

【讨论】：

在官方文档中找不到任何参考资料，目前v4版本中不可用

【参考方案3】：

另一种可能是：

import color from "color"

const themeColorsRed = color
  .rgb(theme.colors.red)
  .array()

那么你可以这样做：

  backgroundColor: `rgba($themeColorsRed, 0.05)`,

【参考方案4】：

假设您还没有在颜色中定义 alpha 通道，您也可以这样做：

backgroundColor: theme.colors.red + '00' 

这会将 Alpha 通道设置为 0，因此是透明的。您可以在'00' 到'ff' 之间附加任何值

【讨论】：

这是最快最直接的解决方案。不敢相信这很难找到。谢谢。

【参考方案5】：

不管怎样，8 位十六进制代码也可以使用

const styleSheet = theme => (
  root: 
     backgroundColor: '#ffffff80',
  ,
)

【参考方案6】：

或者，您可以使用 Material UI Next 中提供的淡入淡出功能。

import fade from 'material-ui/styles/colorManipulator';

const theme = createMuiTheme(
  overrides: 
    MuiButton: 
      root: 
        boxShadow: `0 4px 8px 0 $fade(defaultTheme.palette.primary[500], 0.18)`,
      
    ,
  
);

export default theme;

这是它的工作原理：https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/colorManipulator.js#L157-L164

另一种解决方案可能是使用来自https://github.com/styled-components/polished 的类似颜色函数

【讨论】：

在 material-ui 的第 4 版中，即现在：import fade from '@material-ui/core/styles/colorManipulator';

【参考方案7】：

我找到了解决方案

 backgroundColor: theme.utils.rgba(theme.axColor.black, 0.7),

【讨论】：

这不适用于最新版本的 Material-UI。我在文档中也找不到。有链接吗？

这在当前版本中不再起作用。 @Romainpetit 解决方案有效。

【参考方案8】：

您可以使用 RGBA 值

const styleSheet = theme => (
  root: 
     backgroundColor: 'rgba(255, 255, 255, 0.5)',
  ,
)

https://facebook.github.io/react-native/docs/colors.html

【讨论】：

对不起，我想为我的变量重新使用值

将 theme.colors.red 设为 rgba 值