如何使MUI中的默认颜色主题透明



我想使用Material UI将元素的背景色设置为主要主色,但具有透明度,我尝试了以下方法,但两者都不起作用,任何建议我都非常感谢。

backgroundColor: `rgba(${theme.palette.primary.main}, 0.6)`,

&

background: `rgba(${theme.palette.primary.main}, 0.6)`,

您可以遵循您的模式,但在使用rgba时,请将其中任何一个链接值添加到主题颜色中。

例如,对于9%的透明度,使用17:

backgroundColor: `${theme.palette.primary.main}17`,

从上面的链接复制:

从100%到0%的所有十六进制值alpha:

100%--FF

99%--FC

98%——FA

97%--F7

96%-F5

95%——F2

94%-F0

93%——ED

92%——EB

91%——E8

90%——E6

89%——E3

88%--E0

87%——去

86%——DB

85%-D9

84%——D6

83%——D4

82%——D1

81%——CF

80%-CC

79%——C9

78%——C7

77%——C4-

76%——C2

75%——BF

74%——BD-

73%——BA

72%——B8

71%——B5

70%-B3

69%--B0

68%——广告

67%——AB

66%——A8

65%——A6

64%——A3

63%——A1

62%-9E

61%-9C

60%-99

59%-96

58%--94

57%--91

56%-8F

55%-8C

54%-8A

53%-87

52%--85

51%--82

50%-80

49%-7天

48%-7A

47%--78

46%-75

45%-73

44%-70

43%-6E

42%-6B

41%-69

40%-66

39%--63

38%-61

37%-5E

36%-5C

35%-59

34%-57

33%--54

32%--52

31%--4F

30%-4D

29%-4A

28%-47

27%--45

26%-42

25%-40

24%——3D

23%-3B

22%-38

21%-36

20%--33

19%-30

18%-2E

17%-2B

16%-29

15%-26

14%-24

13%-21

12%-1F

11%-1C

10%-1A

9%--17

8%--14

7%--12

6%-0F

5%-0D

4%-0A

3%-08

2%--05

1%--03

0%--00

我以前为此使用的解决方案是处理主题中的透明颜色。

例如,在我的一个项目中,我在主题的顶部定义了theme.palette.prprimary.main颜色,然后我使用rgba函数计算了一个更轻的变体,就像你在例子中所做的那样。然后,我在我的主题中定义了这种颜色,这样我就可以通过调用theme.palett.primary.light(或任何你想调用的名称(在多个地方重用它。

然后

最新更新