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

【问题标题】：jss how to change opacity for a colorjss如何改变颜色的不透明度
【发布时间】：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 标签

标签： javascript reactjs material-ui 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 值