Apply CSS to Remove Library Picker Dropdown in SPFX Extension

Samuel Stevenson 20 Reputation points

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!

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,712 questions
0 comments No comments
{count} votes

Accepted answer
  1. RaytheonXie_MSFT 32,166 Reputation points Microsoft Vendor

    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


    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!

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. RaytheonXie_MSFT 32,166 Reputation points Microsoft Vendor

    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

    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.

  2. Samuel Stevenson 20 Reputation points

    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:


    0 comments No comments