如何在WinForm的WebView2加载页面中注入自定义CSS？

WebView2没有直接注入CSS的原生API，需要通过JavaScript动态创建style元素并插入到文档中，以此来加载自定义CSS。以下是具体实现方案：

方案1：内嵌CSS代码到JS中直接注入 #

// 定义目标CSS样式
string hoverCss = @"*:hover {
    background-color: #205081 !important;
}";

// 构造用于注入CSS的JS代码
string injectScript = $@"
const styleEl = document.createElement('style');
styleEl.textContent = `{hoverCss}`;
document.head.appendChild(styleEl);
";

// 在文档创建完成时执行注入
await webBrowser.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(injectScript);

方案2：从外部CSS文件读取并注入 #

如果你的CSS写在外部文件中（比如hoverStyle.css），可以先读取文件内容再注入：

// 读取外部CSS文件
string hoverCss = File.ReadAllText("hoverStyle.css");

// 构造注入脚本
string injectScript = $@"
const styleEl = document.createElement('style');
styleEl.textContent = `{hoverCss}`;
document.head.appendChild(styleEl);
";

await webBrowser.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(injectScript);

注意事项 #

• 如果CSS代码中包含反引号（），需要将其转义为`，或者把包裹textContent`的符号换成单引号/双引号（注意同步转义CSS内的对应引号）。
• 使用AddScriptToExecuteOnDocumentCreatedAsync可以确保样式在页面元素渲染前注入，避免出现样式闪烁。

内容的提问来源于stack exchange，提问作者Kim Smith