IT技术 - 尝试使用背景剪辑向材质 UI 图标添加线性渐变？ - 吾爱随笔录

我正在尝试使用 background-clip 属性向材质 UI 图标添加线性渐变，但它没有显示出来？

.social-icon{
    background: linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

'''

<div className="social-icons">
  <FacebookIcon className="social-icon" fontSize="large" />
  <TwitterIcon className="social-icon" fontSize="large" />
  <InstagramIcon className="social-icon" fontSize="large" />
  <YouTubeIcon className="social-icon" fontSize="large" />
</div>