React Bootstrap doesn't let me set background color
reinaldofox opened this issue · comments
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
In my React app the tables suddenly started to appear with a background that I didn't define.
I researched and discovered that Bootstrap automatically defines a Light theme, so much so that when I define <html " data-bs-theme="dark"> the tables become dark.
It turns out that I don't want either Dark or Light, I want to define my backgrounds and even overwriting the rule doesn't work.
How the table should look like:
Maybe it's something silly, but I'm racking my brain and this nonsense is making me mad.
Reduced test cases
no test
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.3
Thanks for reporting this issue @reinaldofox. The default background has been changed in #37084 from transparent to var(--bs-body-bg) because of some issues with the nesting tables. If you think about a way to keep that transparent and make everything works, don't hesitate to suggest some things, it'd be really appreciated!
If you're never using nested tables, and you have a custom Sass compilation, you should be able to change $table-bg to transparent in _variables.scss. If not, you could probably (not tested) add a CSS rule on your side that basically does something like that:
.table {
--bs-table-bg: ; /* or --bs-table-bg: transparent; */
}
As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.