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

jss how to change opacity for a color

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

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

我想知道是否存在根据颜色添加不透明度的功能theme.colors.red

smt 示例如下: backgroundColor: color(theme.colors.red, .05),

您可以使用 RGBA 值

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

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

我找到了使用

的解决方案
 backgroundColor: theme.utils.rgba(theme.axColor.black, 0.7),

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

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

的类似颜色函数

MaterialUI有一个colorManipulatorutility 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)
}

对于 Mui v5:

import { alpha } from "@mui/material";

或者,您可以从 npm 添加 color 库来进行颜色操作:

import Color from 'color';

{
    backgroundColor: Color(theme.colors.red).alpha(0.5).string()
}

就其价值而言,8 位十六进制代码也可以使用

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

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

backgroundColor: theme.colors.red + '00' 

这会将 alpha 通道设置为 0,因此是透明的。您可以附加 '00''ff'

之间的任何值

另一种可能是:

import color from "color"

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

那么你可以这样做:

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

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

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

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