'jss how to change opacity for a color

Currently I am using the following code to add a color to an element using jss.

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

I would like to know if exist a function to add opacity based on colortheme.colors.red.

example smt like: backgroundColor: color(theme.colors.red, .05),

Solution 1:^[1]

Material UI has a colorManipulator utility file, which includes an alpha function:

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)
}

For Mui v5:

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

Alternatively, you can add the color library from npm for color manipulation:

import Color from 'color';

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

Solution 2:^[2]

Alternatively, you can use the fade function provided in 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;

Here's how it's working : https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/colorManipulator.js#L157-L164

Another solution could be to use similar color functions from https://github.com/styled-components/polished

Solution 3:^[3]

Assuming you don't already have the alpha channel defined in the color, you can also do:

backgroundColor: theme.colors.red + '00'

This will set alpha channel to 0, thus transparent. You can append any value between '00' to 'ff'

Solution 4:^[4]

I found a solution using

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

Solution 5:^[5]

You can use RGBA values

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

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

Solution 6:^[6]

Some of these answers are referencing deprecated Material-UI functions. The current preferred approach is to use alpha:

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

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

Solution 7:^[7]

Another possibility is:

import color from "color"

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

Then you can do:

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

Solution 8:^[8]

For what it's worth, an 8 digit hex code works too

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	GorvGoyl
Solution 2	Romainpetit
Solution 3
Solution 4	GibboK
Solution 5	Pandelis
Solution 6	96ethanh
Solution 7	Googol
Solution 8	Zach Posten

'jss how to change opacity for a color

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]