3

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.

Shobhit Tewari
  • 535
  • 5
  • 20

1 Answers1

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;
}
mding5692
  • 806
  • 1
  • 10
  • 34
  • Pretty clean. Can I make a custom page css with this technique? – Shobhit Tewari Feb 27 '21 at 17:08
  • Should be able to, would just be custom css classes then that can be referenced in css file, so just normal html/css stuff, just need to make sure those css classes are used in the custom page – mding5692 Feb 27 '21 at 17:59