0

We have added 4 "Quick Links" web/app part in one section on a SharePoint modern page. We would like to highlight links under "Quick Links web part 2" and "Quick Links web part 4" only. I have added React modern script editor. How do we archive the above requirement using CSS ? If it is not possible in CSS then we would like to introduce JS. I couldn't find a fixed tag name that I can grab and apply CSS except GUID.

Sid
  • 11
  • 1
  • 4

1 Answers1

0

You could try to inject CSS by SPFX. Check the demo shared by hugoabernier.
Main code:

export default class InjectCssApplicationCustomizer
  extends BaseApplicationCustomizer<IInjectCssApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    const cssUrl: string = this.properties.cssurl;
    if (cssUrl) {
        // inject the style sheet
        const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
        let customStyle: HTMLLinkElement = document.createElement("link");
        customStyle.href = cssUrl;
        customStyle.rel = "stylesheet";
        customStyle.type = "text/css";
        head.insertAdjacentElement("beforeEnd", customStyle);
    }

    return Promise.resolve();
  }
}
Amos
  • 2,030
  • 1
  • 5
  • 9
  • I already have Modern Script Editor webpart on the page. What CSS styles to add to highlight links in a particular Quick Links webpart. Note: I have multiple Quick Links webparts on the page. Thanks in advance. – Sid Oct 23 '20 at 08:15
  • I tried to add css to modern script editor,but it does nor work. – Amos Oct 23 '20 at 08:31
  • 1
    Thanks to Mikael Svenson. Check his modern script editor webpart on this link https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor It works. – Sid Oct 26 '20 at 08:11