如何在SPFx WebPart中通过TS新样式方法获取当前站点主题

嘿，我之前也碰到过一模一样的问题！直接调用getTheme()确实只会返回Fabric的默认蓝色主题，因为在SPFx环境里，Fabric没法自动感知SharePoint站点的自定义主题。下面给你两种靠谱的解决思路，亲测有效：

方法一：从WebPart传递主题到React组件 #

这是最直接的方式，核心是通过SPFx的ThemeProvider获取当前站点主题，然后把它作为props传给你的React组件，组件里用这个传入的主题来生成样式。

步骤1：在WebPart中获取并监听主题变化 #

修改你的WebPart主文件（比如YourWebPart.ts），加入主题相关的逻辑：

import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';

export default class YourWebPart extends BaseClientSideWebPart<IYourWebPartProps> {
  private _themeProvider: ThemeProvider;
  private _themeVariant: IReadonlyTheme | undefined;

  protected onInit(): Promise<void> {
    // 从SPFx的服务作用域中获取主题提供者
    this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
    // 获取初始的站点主题
    this._themeVariant = this._themeProvider.tryGetTheme();
    // 监听主题变化（用户切换站点主题时触发）
    this._themeProvider.themeChangedEvent.add(this, this._handleThemeChanged);

    return super.onInit();
  }

  private _handleThemeChanged(args: ThemeChangedEventArgs): void {
    this._themeVariant = args.theme;
    // 主题变化时重新渲染WebPart
    this.render();
  }

  public render(): void {
    const element: React.ReactElement<IYourComponentProps> = React.createElement(
      YourComponent,
      {
        // 把主题作为props传给组件
        theme: this._themeVariant,
        // 你的其他组件props
      }
    );

    ReactDom.render(element, this.domElement);
  }
}

步骤2：组件中使用传入的主题生成样式 #

修改你的组件文件，让getClassNames接收主题参数：

import { getTheme, FontWeights, mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';

// 新增组件props接口，包含theme
export interface IComponentProps {
  theme?: ITheme;
  // 其他props
}

export interface IComponentClassNames {
  locationBanner: string;
  locationLabel: string;
  locationValue: string;
  editLocationButton: string;
  findLocationButton: string;
}

// 让getClassNames接收theme参数，默认用getTheme()兜底
export const getClassNames = (theme: ITheme = getTheme()): IComponentClassNames => {
  return mergeStyleSets({
    locationBanner: {
      display: 'inline-flex',
      paddingLeft: '8px',
    },
    locationLabel: [
      theme.fonts.large,
      { color: theme.palette.neutralPrimary }
    ],
    locationValue: { color: theme.palette.themeDark },
    editLocationButton: { paddingLeft: '20px' },
    findLocationButton: { paddingLeft: '10px' }
  });
};

// 在组件中调用getClassNames时传入主题
const YourComponent: React.FC<IComponentProps> = ({ theme }) => {
  const classNames = getClassNames(theme);

  // 你的渲染逻辑，比如：
  return (
    <div className={classNames.locationBanner}>
      <span className={classNames.locationLabel}>Location:</span>
      <span className={classNames.locationValue}>Your Location</span>
      <button className={classNames.editLocationButton}>Edit</button>
      <button className={classNames.findLocationButton}>Find</button>
    </div>
  );
};

export default YourComponent;

方法二：用Fabric的Customizer组件注入主题 #

如果你不想给每个组件都传主题props，可以用Fabric的Customizer组件把主题注入到整个组件树的上下文里，这样组件里直接调用getTheme()就能拿到正确的站点主题了。

修改WebPart的render方法：

import { Customizer } from 'office-ui-fabric-react/lib/Utilities';

public render(): void {
  const element: React.ReactElement<IYourComponentProps> = React.createElement(
    Customizer,
    {
      // 把站点主题注入到Customizer的设置中
      settings: { theme: this._themeVariant }
    },
    React.createElement(YourComponent, {
      // 其他组件props
    })
  );

  ReactDom.render(element, this.domElement);
}

这样你的组件里原来的getClassNames()代码不用改，直接调用getTheme()就能获取到站点的自定义主题了。

为什么原来的方法不行？ #

简单来说，Fabric的getTheme()默认是读取它自己内部的主题上下文，而在SPFx环境中，这个上下文不会自动和SharePoint的站点主题同步。必须通过SPFx提供的ThemeProvider来获取真实的站点主题变量，再传递给Fabric的样式系统。

个人更推荐第一种方法，因为它更直观，而且能方便地监听主题变化，用户切换站点主题时WebPart会自动更新样式。

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