Question

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

＆＃13;

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

＆＃13;

我想知道是否存在一个基于颜色theme.colors.red添加不透明度的函数。

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

Answer 1

或者，您可以使用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

中的类似颜色函数

Answer 2

材料UI具有colorManipulator utility file，其中包括fade方法：

用法：

import { fade } from '@material-ui/core/styles/colorManipulator';

/**
 * 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
 */
{
    backgroundColor: fade(theme.colors.red, 0.5)
}

color库也可能有用：

import Color from 'color';

然后您可以在代码中引用它：

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

Answer 3

我找到了一个使用

的解决方案

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

Answer 4

您可以使用RGBA值

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

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

Answer 5

另一种可能是：

char *findword(const char *s, const char *w) {
    size_t len = strlen(w);
    char *p;
    while ((p = strstr(s, w)) != NULL) {
        if ((p == s || p[-1] == ' ') && (p[len] == '\0' || p[len] == ' '))
            break;
        s = p + len;
    }
    return p;
}

然后你可以这样做：

import color from "color"

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

Answer 6

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

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

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

Answer 7

对于它的价值，也可以使用8位十六进制代码

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

Answer 8

假设您尚未在颜色中定义Alpha通道，也可以执行以下操作：

backgroundColor: theme.colors.red + '00'

这会将alpha通道设置为0，因此是透明的。您可以在'00'至'ff'

之间附加任何值

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

8 个答案: