Question

我们正在使用Office UI Fabric React为O365通信站点开发现代的Webpart。我想使用基于ts的新方法来设计组件的样式(see here)。一切工作都很好，除了它没有使用要部署到的SharePoint网站的当前主题。

我的Webpart是使用SharePoint Webpart的标准Yeoman支架创建的（选择React作为框架）。

我的样式代码如下：

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

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

const theme = getTheme();

export const getClassNames = (): 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'
        }
    });
};

然后在我的组件的渲染部分中，执行以下操作：

const {locationBanner, editLocationButton, findLocationButton, locationLabel, locationValue} = getClassNames();

然后将其应用于className属性。这可以正常工作，并且可以应用样式-但是：getTheme()返回默认主题（即主要为蓝色），而不是SharePoint网站上当前设置的主题。我是否必须将主题从Webpart ts传递到我的组件，还是应该如何工作？

Answer 1

我的解决方案是从窗口对象中提取主题，构建主题对象，然后根据需要将其传递给组件

赞：

在ts根文件中构建主题

[value]

然后将主题传递到需要的地方。

const ThemeColorsFromWindow: any = (window as any).__themeState__.theme;
const siteTheme: ITheme = createTheme({ //pass this object to your components
  palette: ThemeColorsFromWindow
});

构建我的CSS-in-JS对象

<MyButton
    ButtonText={this.props.itemButtonText}
    ButtonType={'dark'}
    ButtonURL={this.props.itemButtonURL}
    siteTheme={siteTheme} //site theme is passed to component
/>

然后我设置组件的样式道具

  const siteTheme: IReadonlyTheme = this.props.siteTheme; //shortening the path a little

  ButtonStyles: IButtonStyles = { //the interface here varies by component
    root:{
      backgroundColor: siteTheme.palette.themeTertiary, //get theme colors like this
    },
    label:{
      color: siteTheme.palette.white,
    },
    rootHovered:{
      backgroundColor: siteTheme.palette.themePrimary,
    },
    labelHovered:{
      color: siteTheme.palette.white
    }
  };

如果要适应变体或部分背景，请查看此博客文章。 https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds

哪个使用ThemeProvider服务。

Answer 2

在我看来，您好像正在使用office-ui-fabric-react库。您导入的getTheme方法从那里来。我看不到office-ui-fabric-react如何查询SharePoint的当前主题。它可能正在跟踪自己的。我将尝试通过SharePoint组件库获取主题。 https://docs.microsoft.com/en-us/javascript/api/sp-component-base/themeprovider

如何使用基于ts的新样式设计方法在spfx Webpart中获取当前主题

2 个答案: