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.

mding5692 · Accepted Answer · 2021-02-25 07:19:48Z

2

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;
}

answered Feb 25, 2021 at 7:19

mding5692

8161 gold badge15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shobhit Tewari Over a year ago

Pretty clean. Can I make a custom page css with this technique?

mding5692 Over a year ago

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

Collectives™ on Stack Overflow

Adding custom CSS file into AdminBro component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related