如何修改Radzen组件(Numeric、Textbox)的文本颜色?
修改RadzenNumeric组件文本颜色的解决方案
RadzenNumeric组件的文本实际渲染在内部的<input>元素中,直接给组件根元素添加的样式或类会被内部元素的默认CSS优先级覆盖,这就是你之前尝试无效的原因。以下是两种可行的解决方法:
方法1:利用InputCssClass参数(推荐)
RadzenNumeric提供了InputCssClass参数,专门用于给内部的输入框元素指定CSS类,直接使用官方的rz-color-white类即可:
<RadzenNumeric @bind-Value="numberOfCars" Name="txtNumberOfCars" ShowUpDown="false" class="rz-background-color-warning" InputCssClass="rz-color-white"/>
方法2:自定义CSS深度选择器
如果需要更灵活的样式控制,可以在组件的razor文件或全局CSS中添加深度选择器,强制覆盖内部元素的样式:
::deep .rz-numeric .rz-input-element { color: white !important; }
组件代码保持背景色设置即可:
<RadzenNumeric @bind-Value="numberOfCars" Name="txtNumberOfCars" ShowUpDown="false" class="rz-background-color-warning"/>
内容的提问来源于stack exchange,提问作者Mark Bonafe
相关产品推荐
相关产品推荐

