jss how to change opacity for a color

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

Usage:

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

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

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

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'