Adding custom CSS file into AdminBro component

Question

I have a custom page in Admin Bro with the name of gallery. Now in their I want to import some css that I wrote. I tried this:

import './gallery.css';

This does not seem to work for some reason. Is their any way I can add my custom css into my react component in AdminBro page.

Answer 1

Heres how I did it, note that I was use Express.js:

I was trying to customize the look of a table in my AdminBro pages, saw that there was already a admin-bro_TableBody css class and could override it based on below github issues:

https://github.com/SoftwareBrothers/admin-bro/issues/361

So I created a css file and make it publically accessible like so: https://stackoverflow.com/a/58046155/4297337

and then in my adminBro declaration, I did this:

  const adminBro = new AdminBro({
    assets: {
      styles: ['/css/admin.css'],
    },
    ...
  }

The css file I created was called admin.css, the adminBro pages will automatically grab it, you can name the css file whatever you want as long as it is in the public/css/... folder in your root directory of your project

What my CSS file looked like:

.admin-bro_TableBody {
  max-width: max-content;
  word-break: break-word;
}