jss如何改变颜色的不透明度

5 回答

• 0

  我找到了一个解决方案

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

  回复于 2024-05-01T14:27:08+08:00
• 2

  或者，您可以使用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;
  

  这里's how it'工作：https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/colorManipulator.js#L157-L164

  另一种解决方案可能是使用https://github.com/styled-components/polished中的类似颜色函数

  回复于 2024-05-01T14:27:08+08:00
• 4

  材质UI具有 colorManipulator utility file，其中包含 fade 方法：

  用法：

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

  color库也可能有用：

  import Color from 'color';
  

  然后你可以在你的代码中引用它：

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

  回复于 2024-05-01T14:27:08+08:00
• 1

  您可以使用RGBA值

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

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

  回复于 2024-05-01T14:27:08+08:00
• 4

  对于它的 Value ，8位十六进制代码也可以工作

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

  回复于 2024-05-01T14:27:08+08:00