Actualmente estoy usando el siguiente código para agregar un color a un elemento usando jss.
const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) Me gustaría saber si existe una función para agregar opacidad basada en el color theme.colors.red .
ejemplo smt como: backgroundColor: color(theme.colors.red, .05),
Material UI tiene un archivo de utilidad colorManipulator , que incluye una función alpha :
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, ie 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) }Alternativamente, puede agregar la biblioteca de colores de npm para la manipulación de colores:
import Color from 'color'; { backgroundColor: Color(theme.colors.red).alpha(0.5).string() }Alternativamente, puede usar la función de atenuación proporcionada en 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;Así es como funciona: https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/colorManipulator.js#L157-L164
Otra solución podría ser usar funciones de color similares de https://github.com/styled-components/polished
Suponiendo que aún no tiene el canal alfa definido en el color, también puede hacer:
backgroundColor: theme.colors.red + '00' Esto establecerá el canal alfa en 0, por lo tanto, transparente. Puede agregar cualquier valor entre '00' y 'ff'