jss how to change opacity for a color

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