How to Inject Custom CSS in admin panel to customize a specific type field

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.15
  • Operating System:MacOS
  • Database:postgres
  • Node Version: 20

I am using Strapi Json Rich Text Editor i want to remove scroll from text editor and also want resize its view on form but i didn’t find anything related to this on how to inject custom css in strapiV4.

2

@Paul_Brats?

3

Sounds like you may want to take a look at the “Extension” section of the Admin Panel Customization doc?

I’ve had success importing the desired .css file inside my plugin :thought_balloon: Recently went through something similar when I wanted to add Tailwind CSS to Strapi.

4

can you share a sample code/snippet as i didn’t find any example of extending admin panel components

5

The easiest way I’ve found to do this is using a custom plugin.

TLDR:

Create a custom plugin to import the desired .css file inside of the root index[.js|.tsx] file.

Step by Step:
  1. Generate a new custom plugin via the Strapi CLI
  2. Create a ./admin/src/styles/global.css with the desired overrides
  3. Import the stylesheet inside of ./admin/src/index.js (or ./admin/src/index.tsx with typescript plugin) e.g.
import "./styles/global.css";
  1. Enable your custom plugin inside of your Strapi project
...
 "my-plugin": {
    enabled: true,
    resolve: "./src/plugins/my-plugin",
  },
  1. Any other code generated inside the ./server directory, as well as any code associated with custom admin panels e.g. ./admin/src/pages can be removed.
1 Like