Reputation: 120
In React, is there a way to set border color opacity while using an imported theme color?
For example if my css includes: borderBottomColor: theme.palette.primary.main
with theme being imported by Material UI using makeStyles can I somehow add an opacity to this?
I know in rgb format you can do something like borderBottomColor: rgba(255, 0, 0, 0.5)
so is there a way to do something similar with a theme color?
Upvotes: 4
Views: 3185
Reputation: 3772
an alpha value can be added in the end of the theme color in this way:-
borderBottom:`${theme.palette.primary.main+'77'} 1px solid`
value can be provided from 00
to ff
Another way is to use material-ui's colorManipulator
utility function from directory
import { fade } from '@material-ui/core/styles/colorManipulator';
and use this as like this:-
borderBottom : `${fade(theme.palette.primary.main, 0.5)} 1px solid`
Fade accepts two values.
/**
* 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
*/
Here is the working example:- https://codesandbox.io/s/agitated-chaum-924
Upvotes: 3