Forum Discussion
Custom CSS on a Library page
Unfortunately, you cannot add custom CSS classes using the SharePoint JSON formatting capabilities.
You will have to develop a simple SPFx application customizer and inject custom CSS classes using it. You can add all the custom CSS classes you need in single SPFx solution and deploy it at either site level or tenant level (if you need those classes on all SharePoint sites).
SPFx application customizer loads automatically on all modern experience pages in SharePoint.
Refer this thread for more information: How can I include the same JS and CSS files on multiple SharePoint Modern Page?
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
ganeshsanap wow, Microsoft really have made something that should be very simple (and yet very powerful) into something that is almost unusable (for the ordinary user). They are so close, but yet so far, with `additionalRowClass` and predefined CSS classes... very easy for the mere mortal to switch row style based on predefined classes (great!) but not realistically possible to define your own classes (crazy!)...
- ganeshsanapOct 03, 2023MVP
Yes, I get what you are saying and I have faced similar issue in the past to use custom CSS classes in JSON formatting. But this is the current limitation of SharePoint JSON formatting from Microsoft.
If you want Microsoft to support defining custom classes easily using JSON formatting, you can add new idea/feedback on SharePoint Feedback Portal
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- drmrbrewerOct 03, 2023Copper Contributor
ganeshsanap I've https://feedbackportal.microsoft.com/feedback/idea/90fa977d-db61-ee11-a81c-0022484e5453... feel free to add your vote!
- ganeshsanapOct 03, 2023MVP
Thanks for adding new feedback request, I have voted!
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.