React AG Grid全局字体设置致复选框失边框且无法点击问题

为整个应用设置全局字体后，AG Grid内的复选框出现两个异常：

• 丢失边框样式
• 无法点击勾选

应用整体字体已成功修改为目标字体，但复选框功能和样式均受影响。

状态对比 #

• 正常状态：复选框显示清晰边框，可正常点击勾选
• 异常状态：复选框无边框，点击无响应

已尝试的无效CSS代码 #

*:not(.div):not(.YourClassName){  
  font-family:'Roboto-Regular';
}

解决方案 #

问题根源是全局通配符*的选择器覆盖了AG Grid复选框的默认样式与交互逻辑，且原排除规则:not(.div)不准确——AG Grid的复选框并非用div类标识。

推荐两种解决方式：

1. 仅针对文本元素设置字体
   只对页面中的文本类元素应用字体样式，避免影响表单控件：

body, p, h1, h2, h3, h4, h5, h6, span, a, label, 
input[type="text"], input[type="password"], textarea, select {
  font-family: 'Roboto-Regular', sans-serif;
}

2. 精准排除AG Grid内部元素
   利用AG Grid根容器的ag-root类，排除其内部所有元素的全局字体设置：

*:not(.ag-root *) {
  font-family: 'Roboto-Regular', sans-serif;
}

以上两种方式既能实现全局字体设置，又不会干扰AG Grid内部控件的正常样式与交互。

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