我想使用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(或任何你想调用的名称(在多个地方重用它。
然后