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

Answer 1

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

---

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

Answer 2

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