使用Semantic-UI React时更改嵌入按钮颜色

Question

我正在使用语义UI React Embed组件https://react.semantic-ui.com/modules/embed/，并希望将play按钮的颜色从白色更改为其他颜色。有什么建议吗？

一种选择是将显示Youtube/ Vimeo按钮(在背景和前景之间提供良好的对比度)的嵌入active，但仍然想弄清楚这一点，以保持在我的网页上的一致性，因为我还没有使我的视频嵌入active

​

​

我对这个库和React有点陌生，我发现很难理解他们提供的所有道具。

Answer 1

您可以使用类通过CSS覆盖颜色

.ui.embed>.icon:before {
   color: #ff0000;
 }

如果您想通过javascript设置颜色，您可以创建一个CSS变量，然后使用javascript更改该变量的值

:root {
   --embed-icon-color: #fff;
}

.ui.embed>.icon:before {
   color: var(--embed-icon-color);
 }

最后，在Javascript中，你可以这样做：

 document.documentElement.style.setProperty('--embed-icon-color','#ff0000');