We are developing modern webparts for O365 Communication Sites using Office UI Fabric React. I want to use the new ts-based approach to styling my components(see here). Everything works quite well, except that it's not using the current theme of the SharePoint site it's deployed to.

My webpart was created using standard Yeoman scaffolding for SharePoint webparts (selecting React as the framework).

My styling code looks like this:

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'
        }
    });
};

And then in the render part of my component I do the following:

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

And then apply that in the className-attributes. This works fine and the style is applied - however: getTheme() returns the default theme (i.e. mainly blue), not what is currently set on the SharePoint site. Do I somehow have to pass the theme down to my component (from the webpart ts) or how should this work?

1 Answers

0
jens On

It seems to me like you are using the office-ui-fabric-react library. The getTheme method you import comes from there. I can't see how office-ui-fabric-react queries SharePoint for the current theme. It may be tracking its own. I would try getting the theme through the SharePoint component libraries. https://docs.microsoft.com/en-us/javascript/api/sp-component-base/themeprovider