How would I edit a SharePoint page using SPFX?

Question

I want to put a sharepoint webpart created using spfx, onto a SharePoint page. I don't want the navigation bar on the left and I want the webpart to be central. Is this possible using SPFX?
If so, would it be an SPFX extension or would it be the JSX/CSS within the webpart that overrides the pages column width and nav bar?

My reason for asking is, I don't want to have to create a Communications site and it's 'full-width column' that a team site doesn't have, in order to add a webpart that I've made.

Answer 1

Hi @Pipkin, Thomas ,

Currently, Full Width Column only supported for Communication Site, please see the same userVoice here:

Full-Width Column Webpart available to Team Site Template

A workaround is to create a SPFX Extension to inject the css below:

[id='spLeftNav'] {  
    max-width: 0px !important;  
  }  
  
[class^='CanvasSection']  
{  
   margin-left:450px;  
}  

You may need to edit the CSS margin-left or add some other necessary style to adjust in your side.

For inject CSS Style with SPFX Extension, please check the following demo:

Inject Custom CSS on SharePoint Modern Pages using SPFx Extensions

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
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 2

check this solution created with SPFx: SharePoint Full Page Canvas App.