如何覆盖 Shadow DOM 的 CSS 样式

huangapple go评论55阅读模式
英文:

How to override css style of shadow dom

问题

我正在使用 Fluent UI 网页组件来创建自动完成下拉框。我想要更改下拉框的背景,但是有一个 #shadow-root(open) 被创建,我无法覆盖它。所以请告诉我如何覆盖这个影子 DOM。

我附上了我要覆盖的 .control 类在 #shadow-root 内的检查图像。
如何覆盖 Shadow DOM 的 CSS 样式

英文:

I am using the fluent ui web component for autocomplete drop-down. I want to change the background of the drop-down box but there is a #shadow-root(open) created which I am not able to override. So please help me how to override this shadow dom.

I attached the image of my inspect where I want to override .control class inside the #shadow-root
如何覆盖 Shadow DOM 的 CSS 样式

答案1

得分: 1

fluent-combobox::part(control) {
//添加你的CSS属性
}

阅读更多关于 MDN ::part

英文:

Div content has part attribute. It make your work done.
Add this line in your css file

fluent-combobox::part(control) {
	//add your css properties
}

Read more at MDN ::part

huangapple
  • 本文由 发表于 2023年2月16日 15:17:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75468932.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定