javascriptreactjsmaterial-uijss

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

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