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.

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

Answer 1

Material UI has a colorManipulator utility file, which includes a fade method:

Usage:

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

The color library might also be of use:

import Color from 'color';

Then you can reference it in your code:

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