如何为<SfTextBox>添加无JS的适配明暗模式的透明样式？

需求 #

在托管式Blazor WebAssembly项目中，结合Tailwind CSS与Syncfusion组件，给<SfTextBox>实现明暗模式自适应的半透明背景，且不使用JavaScript。

现状问题 #

• <SfTextBox>渲染后的HTML结构：

<input id="name" autocomplete="on" type="text" 
       class="e-control e-textbox e-lib e-input" 
       name="name" role="textbox" tabindex="0" 
       aria-disabled="false" _bl_4="">

• 仅能修改纯色背景，无法实现透明效果或明暗模式适配：
  • 纯色修改生效，但无透明/适配：

  .e-textbox {
      background-color:#999999 !important;
  }
  

  • 尝试透明效果均失败：

  /* 无效 */
  .e-textbox {
      background-color:#99999940 !important;
  }
  
  /* 无效 */
  .e-textbox {
      background-color:rgba(127,127,127,.25) !important;
  }
  
  /* 无效 */
  .e-textbox {
      @apply bg-neutral-500 bg-opacity-25;
  }
  

  • 尝试明暗适配失败：

  /* 无效 */
  .e-textbox {
      @apply 
          bg-neutral-900
          bg-opacity-10
          dark:bg-neutral-200 
          dark:bg-opacity-10;
  }
  

解决方案 #

核心原因是Syncfusion输入框的样式优先级更高，且可能存在内部样式干扰，需要用精准选择器+强制覆盖来实现效果。

1. 确认Tailwind Dark模式配置 #

确保tailwind.config.js中启用class模式（Blazor项目通常用此模式切换明暗）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./index.html",
    "./**/*.{razor,html,cshtml}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 编写高优先级样式覆盖 #

直接定位到input元素结合e-textbox类，用!important强制覆盖Syncfusion的默认样式：

方法一：使用Tailwind v3+ 简化语法

input.e-textbox {
    @apply bg-neutral-900/10 dark:bg-neutral-200/10 !important;
}

（注：/10是Tailwind v3新增的透明度简写，等价于bg-opacity-10）

方法二：原生CSS实现

/* 亮色模式下的半透明背景 */
input.e-textbox {
    background-color: rgba(23, 23, 23, 0.1) !important;
}

/* 暗色模式下的半透明背景 */
.dark input.e-textbox {
    background-color: rgba(229, 229, 229, 0.1) !important;
}

3. 确保明暗模式切换生效 #

在项目根元素（如<body>）上根据状态添加/移除dark类，比如：

<body class="@(ThemeService.IsDarkMode ? "dark" : "")">
    <!-- 页面内容 -->
</body>

这样设置后，<SfTextBox>就能根据当前明暗模式自动切换半透明背景，完全不需要JavaScript。

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