Попытка добавить линейный градиент к значку пользовательского интерфейса material с помощью фонового клипа?

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь добавить линейный градиент к значку пользовательского интерфейса материала, используя свойство background-clip, но он просто не отображается?

 .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>
 

Комментарии:

1. <FacebookIcon style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}} /> попробуйте это.

2. похоже, это должно сработать, если только специфичность селектора не переписана другим правилом в другом месте.