@fluentui/react-northstar自定义componentStyles覆盖组件样式解决方案

样式丢失的核心原因是@fluentui/react-northstar主题中componentStyles下的组件插槽样式，默认是接收主题变量入参的函数，而非静态样式对象。你直接传入静态对象用deepmerge合并时，会把原主题对应的样式函数整体替换为你写的静态对象，原函数返回的所有内置基础样式自然不会生效。

import { teamsTheme, Provider, Segment } from "@fluentui/react-northstar";
import deepMerge from "deepmerge";

// 提前取出原主题内置的Segment根节点样式函数
const originSegmentRootStyle = teamsTheme.componentStyles.Segment.root;

const customTheme = {
  componentStyles: {
    Segment: {
      // 自定义样式必须和内置格式保持一致，使用函数接收组件样式参数
      root: (styleProps) => {
        // 先执行原样式函数，拿到全部内置基础样式
        const baseStyle = originSegmentRootStyle(styleProps);
        // 合并自定义样式后返回，不会丢失原有样式
        return {
          ...baseStyle,
          borderRadius: 4
        }
      }
    }
  }
};

// 合并主题时配置跳过函数类型的递归合并，避免篡改内置样式函数
const theme = deepMerge(teamsTheme, customTheme, {
  isMergeableObject: (obj) => typeof obj !== 'function' && deepMerge.isMergeableObject(obj)
});

const App = () => {
  return (
    <Provider theme={theme}>
      <Segment>Test</Segment>
    </Provider>
  )
}

• 所有自定义的componentStyles插槽样式都要使用上述函数格式，禁止直接传入静态样式对象，否则必然会覆盖对应插槽的全部内置样式。
• 该自定义方式通用于所有Fluent Northstar组件的主题级样式修改，不止Segment组件。
• 如果需要同时自定义组件的其他插槽（比如Segment的其他子节点样式），每个插槽都要按照「取原样式函数 → 函数内合并自定义属性」的逻辑编写。

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