web-dev-qa-db-fra.com

jss comment changer l'opacité d'une couleur

Actuellement, j'utilise le code suivant pour ajouter une couleur à un élément à l'aide de jss.

const styleSheet = theme => ({
  root: {
     backgroundColor: theme.colors.red,
  },
})

Je voudrais savoir s'il existe une fonction pour ajouter l'opacité basée sur la couleur theme.colors.red.

exemple smt comme: backgroundColor: color(theme.colors.red, .05),

javascriptreactjsmaterial-uijss
17
GibboK

L'interface utilisateur du matériau a un colorManipulatorfichier utilitaire , qui inclut une méthode fade:

Usage:

import { fade } from '@material-ui/core/styles/colorManipulator';

/**
 * 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
 */
{
    backgroundColor: fade(theme.colors.red, 0.5)
}

La bibliothèque color peut également être utile:

import Color from 'color';

Ensuite, vous pouvez le référencer dans votre code:

{
    backgroundColor: Color(theme.colors.red).alpha(0.5).string()
}
44
Craig Myles

Alternativement, vous pouvez utiliser la fonction de fondu fournie dans l'interface utilisateur matérielle suivante.

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;

Voici comment cela fonctionne: https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/colorManipulator.js#L157-L164

Une autre solution pourrait être d'utiliser des fonctions de couleur similaires de https://github.com/styled-components/polished

8
Romainpetit

J'ai trouvé une solution en utilisant

 backgroundColor: theme.utils.rgba(theme.axColor.black, 0.7),
4
GibboK

Vous pouvez utiliser des valeurs RGBA

const styleSheet = theme => ({
  root: {
     backgroundColor: 'rgba(255, 255, 255, 0.5)',
  },
})

https://facebook.github.io/react-native/docs/colors.html

1
Pandelis

Pour ce que ça vaut, un code hexadécimal à 8 chiffres fonctionne aussi

const styleSheet = theme => ({
  root: {
     backgroundColor: '#ffffff80',
  },
})
0
Zach Posten

En supposant que vous n'avez pas déjà défini le canal alpha dans la couleur, vous pouvez également faire:

backgroundColor: theme.colors.red + '00'

Cela mettra le canal alpha à 0, donc transparent. Vous pouvez ajouter n'importe quelle valeur entre '00' à 'ff'

0
guenis