jss how to change opacity for a color

Question

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

from what I can tell from the documentation can you not just set the `opacity` property? https://github.com/cssinjs/cssinjs/search?utf8=&q=opacity&type= — zfrisch, Nov 13 '17 at 16:13
opacity is for all the element I need instead just change the value inside the background color — GibboK, Nov 13 '17 at 16:39
Assuming I understand the question correctly, you should remove the `jss` tag — aaaaaa, Nov 13 '17 at 16:44

score 192 · Accepted Answer · edited Apr 20 '22 at 08:40

192

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

edited Apr 20 '22 at 08:40

GorvGoyl

42,508
29
229
225

answered Aug 23 '18 at 05:57

Craig Myles

5,206
3
40
37

7

The solution in this answer is now deprecated in the latest Material-UI. Use `alpha` instead of `fade` – 96ethanh Jul 22 '21 at 15:29
7

For **Mui v5**, you need to add this code: `import { alpha } from "@mui/material";` – NearHuscarl Sep 20 '21 at 10:45
for Mui v4: `import { alpha } from '@material-ui/core'` – Facundo Colombier Oct 06 '21 at 16:55
1

for Mui v5: `import { alpha } from '@mui/material/styles'`. See: https://mui.com/guides/migration-v4/#styles – Jonathan Jan 24 '22 at 11:51

score 17 · Answer 2 · answered Jan 02 '18 at 15:51

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

in version 4 of material-ui that is now: ````import {fade} from '@material-ui/core/styles/colorManipulator';```` — pgee70, Nov 18 '19 at 03:53

guenis · Answer 3 · 2019-04-22T18:06:23.597

14

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'

edited Apr 22 '19 at 18:06

answered Apr 17 '19 at 20:02

guenis

2,520
2
25
37

1

This is the fastest and most straight-forward solution. Can't believe this was so hard to find. Thanks. – Muppet Sep 27 '20 at 21:30

score 6 · Answer 4 · answered Nov 13 '17 at 16:38

6

I found a solution using

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

answered Nov 13 '17 at 16:38

GibboK

71,848
143
435
658

7

This doesn't work for me with the latest version of Material-UI. I can't find it in the documentation either. Do you have a link? – Craig Myles Aug 23 '18 at 05:27
2

This doesn't work anymore in the current version. @Romainpetit solution works. – Simone Jan 04 '19 at 16:30

score 6 · Answer 5 · answered Jun 23 '22 at 21:03

for MUI v5 this seems to work:

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

...

MuiContainer: {
      styleOverrides: {
        root: {
          '&.MuiContainer-asideWithImage': {
            backgroundColor: alpha(MY_COLOR, 0.78),
          },
        },
      },
    },

...

score 4 · Answer 6 · answered Jul 22 '21 at 15:35

4

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)

answered Jul 22 '21 at 15:35

96ethanh

128
2
6

2

can't find any reference in the official documentation, and is not available in the current v4 version – Facundo Colombier Aug 04 '21 at 15:36

score 2 · Answer 7 · answered Nov 13 '17 at 16:18

2

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

answered Nov 13 '17 at 16:18

Pandelis

1,854
13
20

4

sorry I wanted to re-use value for my variable – GibboK Nov 13 '17 at 16:38
Make theme.colors.red an rgba value – Pandelis Nov 13 '17 at 16:42

score 1 · Answer 8 · answered Jan 07 '21 at 00:06

1

Another possibility is:

import color from "color"

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

Then you can do:

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

answered Jan 07 '21 at 00:06

Googol

2,815
2
22
13

score 0 · Answer 9 · answered Nov 23 '18 at 18:45

0

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

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

answered Nov 23 '18 at 18:45

Zach Olivare

3,805
3
32
45

jss how to change opacity for a color

9 Answers9

Linked