SmartClient修改按钮样式、baseStyle使用及按钮颜色异常排查

直接设置backgroundColor失效原因 #

SmartClient 组件默认加载内置皮肤样式，渲染时会自动给按钮的默认、悬停、选中、禁用、聚焦等交互状态追加对应样式后缀，组件上直接配置的backgroundColor这类内联样式属性优先级低于框架自动生成的状态样式，会被覆盖导致不生效。另外backgroundColor={red}写法本身有误，颜色值为字符串时需要加引号，即使修正为backgroundColor="red"依然会被状态样式覆盖。

定位SmartClient实际加载样式的方法 #

无需遍历本地项目下大量css/pcss文件，通过浏览器开发者工具即可快速定位：

• 页面渲染完成后按F12打开开发者工具，使用元素选择器选中目标按钮
• 右侧「样式」面板会直接展示当前按钮生效的所有CSS规则，规则右上角标注了对应CSS文件来源与行号，框架内置皮肤样式通常带有skin/smartclient相关路径标识
• 查看选中元素的class属性即可确认当前加载的基础样式：SmartClient默认按钮基础样式名一般为button，状态类会在基础名后追加Over（悬停）、Selected（选中）、Disabled（禁用）、Focused（聚焦）等后缀，例如悬停态类名为buttonOver，选中态类名为buttonSelected。

自定义样式创建、引入与使用流程 #

新建自定义样式 #

在全局CSS文件中编写自定义样式，必须覆盖所有交互状态，状态类命名规则为「自定义基础样式名+框架固定状态后缀」，否则框架切换状态时会因匹配不到对应样式回退到默认皮肤。示例样式如下：

/* 默认态 */
.customBtn {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
}
/* 悬停态 */
.customBtnOver {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border: 1px solid #bbbbbb !important;
}
/* 选中/聚焦态 */
.customBtnSelected, .customBtnFocused {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  border: 1px solid #1890ff !important;
}
/* 禁用态 */
.customBtnDisabled {
  background-color: #f5f5f5 !important;
  color: #999999 !important;
  border: 1px solid #e8e8e8 !important;
  cursor: not-allowed;
}

引入样式 #

在项目入口文件（如index.js/App.js）顶部通过import引入编写好的自定义CSS文件即可，引入方式与普通全局CSS完全一致。

组件中使用 #

不要同时混用baseStyle和backgroundColor这类样式属性，直接给按钮的baseStyle属性传入自定义的基础样式名即可：

<VLayout>
  <HTMLFlow contents={`<span style="font-weight: bold">Actions</span><br>`}/>
  <LayoutSpacer/>
  <Button title={translation.button.addNew} baseStyle="customBtn"/>
  <LayoutSpacer/>
  <Button title={translation.button.remove} visibility={'hidden'} baseStyle="customBtn"/>
</VLayout>

按钮显示蓝色异常问题修复 #

问题原因 #

_skipCheckButton配置为baseStyle="btn-secondary button view-btn"且额外添加backgroundColor={'white'}，最终显示为蓝色有两个核心原因：

• baseStyle属性仅支持传入单个基础样式类名，传入空格分隔的多个类名属于错误用法，框架会将整个字符串作为基础样式名，拼接状态后缀后会生成不存在的类名（如btn-secondary button view-btnOver），匹配不到自定义样式时会自动回退到框架默认的蓝色聚焦/选中样式
• 额外配置的backgroundColor属性优先级低于框架状态样式，无法覆盖默认蓝色背景

修复方案 #

二选一即可：

• 自定义独立基础样式：将需要复用的样式整合到单个独立CSS类中，baseStyle传入该单独类名，删除冗余的backgroundColor属性，所有文字颜色、边框、背景样式都写在对应状态的CSS规则中。
• 复用第三方样式：如果要复用已有的第三方按钮样式（如bootstrap的btn-secondary类），不要使用baseStyle属性，改用className传入类名，同时添加useCSSStyle={true}配置，告知框架不要自动追加状态类、不要套用内置皮肤逻辑：

this._skipCheckButton = <Button 
  title={translation.button.skip_check} 
  width={77} 
  autoFit 
  className="btn-secondary button view-btn"
  useCSSStyle={true}
/>;

按钮蓝色异常效果截图 #

内容的提问来源于stack exchange，提问作者Darius.V