How to use the @microsoft/load-themed-styles.loadStyles function in @microsoft/load-themed-styles

To help you get started, we’ve selected a few @microsoft/load-themed-styles examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Puzzlepart / spfx-solutions / Pzl.Ext.StatusBar / src / extensions / modernSiteStatusbar / ModernSiteStatusbarApplicationCustomizer.ts View on Github external
private async render(): Promise {
        // Make sure all messages are shown on one line
        loadStyles(`#${this.properties.messageId} > DIV {float:left;margin-right:15px;}`);

        let targetNode = document.getElementById(this.properties.messageId);
        if (!targetNode) {
            // Make sure message element is present - if not create it
            targetNode = document.createElement("DIV");
            targetNode.id = this.properties.messageId;
            document.body.appendChild(targetNode);
        }

        if (!_topPlaceholder) {
            _topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this._onDispose });

            // Hide placeholder if there is no text in it
            _topPlaceholder.domElement.style.cssText = targetNode.innerText.length > 0 ? "" : "display:none"

            _topPlaceholder.domElement.innerHTML = `
github SharePoint / sp-dev-fx-webparts / samples / react-script-editor / src / webparts / scriptEditor / components / ScriptEditor.tsx View on Github external
constructor() {
        super();

        this._showDialog = this._showDialog.bind(this);
        this._closeDialog = this._closeDialog.bind(this);
        this._cancelDialog = this._cancelDialog.bind(this);
        this._onScriptEditorTextChanged = this._onScriptEditorTextChanged.bind(this);

        const uiFabricCSS: string = `
    .pzl-bgColor-themeDark, .pzl-bgColor-themeDark--hover:hover {
      background-color: "[theme:themeDark, default:#005a9e]";
    }
    `;
        loadStyles(uiFabricCSS);
        this.state = {
            showDialog: false
        };
    }
github Puzzlepart / spfx-solutions / Pzl.Part.Divider / src / webparts / divider / DividerWebPart.ts View on Github external
if (color.toLocaleLowerCase().indexOf("theme") !== -1) {
            color = '"' + color.trim() + '"';
        }

        let className = "pzl" + this.makeId();
        let propClass = `.${className} {
            background-color: ${color};
            width: ${this.properties.width}%;
        }`;

        let cssString = ``;
        if (this.displayMode == DisplayMode.Edit) {
            cssString = `margin-bottom:50px`;
        }

        loadStyles(propClass);
        this.domElement.innerHTML = `<hr style="${cssString}" class="${className}" role="presentation" aria-hidden="true">`;
    }

@microsoft/load-themed-styles

Loads themed styles.

MIT
Latest version published 9 days ago

Package Health Score

95 / 100
Full package analysis

Similar packages