jss how to change opacity for a color
JavascriptReactjsMaterial UiJssJavascript Problem Overview
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),
Javascript Solutions
Solution 1 - Javascript
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()
}
Solution 2 - Javascript
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
Solution 3 - Javascript
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'
Solution 4 - Javascript
I found a solution using
backgroundColor: theme.utils.rgba(theme.axColor.black, 0.7),
Solution 5 - Javascript
You can use RGBA values
const styleSheet = theme => ({
root: {
backgroundColor: 'rgba(255, 255, 255, 0.5)',
},
})
Solution 6 - Javascript
Some of these answers are referencing deprecated Material-UI functions. The current preferred approach is to use alpha
:
import { alpha } from "@material-ui/core";
...
// yields rgba(255,255,255,0.85)
backgroundColor: alpha(theme.palette.background.paper, 0.85)
Solution 7 - Javascript
Another possibility is:
import color from "color"
const themeColorsRed = color
.rgb(theme.colors.red)
.array()
Then you can do:
{
backgroundColor: `rgba(${themeColorsRed}, 0.05)`,
}
Solution 8 - Javascript
For what it's worth, an 8 digit hex code works too
const styleSheet = theme => ({
root: {
backgroundColor: '#ffffff80',
},
})