如何移除Dev Extreme React主题以消除额外样式类？

• 检查组件导入方式
  确保只导入单独的图表组件，不要引入全局的DevExtreme样式文件。比如：

  // 正确：仅导入需要的图表组件
  import { Chart } from 'devextreme-react/chart';
  
  // 错误：不要导入全局通用样式或主题文件
  // import 'devextreme/dist/css/dx.common.css';
  // import 'devextreme/dist/css/dx.light.css';
  

• 通过核心配置禁用默认样式
  在项目入口文件（如index.jsx/main.jsx）中添加全局配置，关闭默认主题推断和通用字体样式：

  import { config } from 'devextreme/core';
  
  config({
      defaultOptions: {
          global: {
              useInferredTheme: false,
              typography: {
                  useDefaultFont: false
              }
          }
      }
  });
  

  这个配置会阻止DevExtreme自动注入通用主题相关的样式类。

• 兜底方案：CSS覆盖样式
  如果上面的方法仍有残留样式，可以手动用CSS覆盖：

  .dx-theme-generic-typography, 
  .dx-theme-generic-typography input, 
  .dx-theme-generic-typography textarea {
      font-family: unset !important;
      line-height: unset !important;
      /* 其他需要覆盖的样式同理 */
  }
  

• 排查间接依赖的样式引入
  用包管理器命令检查依赖树，确认是否有其他第三方包间接引入了DevExtreme的样式：

  # npm 用户
  npm ls devextreme
  
  # yarn 用户
  yarn list devextreme
  

  若发现无关依赖，可调整版本或通过package.json的resolutions（yarn）/overrides（npm）来排除不必要的样式引入。

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