How to add custom HTML/CSS to a sharepoint modern page

NS 20 Reputation points
2024-03-19T11:22:32.6933333+00:00

I want to add some custom HTML/CSS script in a sharepoint modern page but I have not find a way to do so yet.

I have tried to upload my html script as .aspx and embed it using iframe.

I have tried to add a web part, there is no content editor.

I have created a wiki page, I tried to edit source, most of my code is being removed and I am getting a Warning: Some of your markup was stripped out. Please use the embed command>

I try to embed code, I am getting   

This HTML cannot be inserted because you don't have access to add scriptable Web Parts in this site. Please contact your administrator if you think you should have rights to do so.

Is there any workaround?

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,567 questions
0 comments No comments
{count} votes

Accepted answer
  1. RaytheonXie_MSFT 34,651 Reputation points Microsoft Vendor
    2024-03-20T02:44:45.42+00:00

    Hi @NS,

    As the script editor web part is not supported in modern SharePoint, we are unable to insert CSS or JavaScript directly. We have to use SPFx based react script editor web part to add custom CSS or JavaScript to modern SharePoint Online pages.

    Reference:

    1. Build your first SharePoint Framework Extension.
    2. Inject Custom CSS on SharePoint Modern Pages using SPFx Application Extensions.
    3. Step By Step Procedure To Add A JS File To All Pages In A SPFx Modern Pages Using SharePoint Framework Extension.

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.