admin管理员组文章数量:1391968
I wanted to set the background color of an element to be the primary main color but with transparency using Material-UI, tried to do it the following ways but both hasn't worked , any suggestion i would highly appreciate it.
backgroundColor: `rgba(${theme.palette.primary.main}, 0.6)`,
&
background: `rgba(${theme.palette.primary.main}, 0.6)`,
I wanted to set the background color of an element to be the primary main color but with transparency using Material-UI, tried to do it the following ways but both hasn't worked , any suggestion i would highly appreciate it.
backgroundColor: `rgba(${theme.palette.primary.main}, 0.6)`,
&
background: `rgba(${theme.palette.primary.main}, 0.6)`,
2 Answers
Reset to default 5You can follow your pattern but instead on using rgba add any one of this link values to your theme color.
e.g. for 9% transparency use 17:
backgroundColor: `${theme.palette.primary.main}17`,
Copied from the link above:
All hex value from 100% to 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% — DE
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% — AD
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% — 7D
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
A solution which I have used for this before is to handle the transparent color in the theme.
so for example in one of my projects I define the theme.palette.primary.main color at the top of my theme and then I calculate a lighter variant using the rgba function as you have done in your example as well. I then define this color in my theme so I can reuse it in multiple places by calling theme.palette.primary.light (or whatever you wish to call it).
and then
本文标签： javascriptHow to make the default color theme in MUI transparentStack Overflow
版权声明：本文标题：javascript - How to make the default color theme in MUI transparent? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744743625a2622757.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论