Apply CSS to Remove Library Picker Dropdown in SPFX Extension

Question

Is it possible to apply a CSS fix as an SPFX extension to remove the library picker dropdown in SharePoint? We have over 400 document libraries with confidential client files, and we're trying to restrict access to only authorized users. Despite assigning permissions to individual libraries, users can see all the libraries in the site, even those they have no permission to access, using the library picker dropdown. We found a suggestion in the Microsoft Community to use a CSS fix as an SPFX extension, but we're not developers. Has anyone applied this fix before? Could you provide the source code? I apologize if this issue has been addressed before, I couldn't find it. Thanks in advance!

Answer 1

Hi @Samuel Stevenson,

I'm glad to hear you solve the problem ,if you have any issue about SharePoint, you are welcome to raise a ticket in this forum.

By the way, since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others." and according to the scenario introduced here: Answering your own questions on Microsoft Q&A, I would make a brief summary of this thread:

[Apply CSS to Remove Library Picker Dropdown in SPFX Extension]

Issue Symptom:

Need to apply custom css to remove some webpart in SharePoint modern page

Solution:

Inject custom CSS by following extension

SPFx Applications Customiser CSS Injection

Insert the following code to hide webpart in extension

button[title='Switch to other libraries on this site'] {
    display: none !important;
}

---

You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!

Answer 2

Hi @Samuel Stevenson,

This repo is a react based SPFx web part and extension that allows users to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site. You could use following web part to apply the css file. Please make a reference

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-js-css-ref

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Hi @RaytheonXie_MSFT ,

I couldn't quite follow the instructions you provided in this thread, but I was able to deploy the workaround that you outlined here: https://learn.microsoft.com/en-us/answers/questions/1166685/sharepoint-online-modern-sites-homepage-how-to-rem

Thanks!