Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React Bootstrap doesn't let me set background color #39812

Closed
3 tasks done
reinaldofox opened this issue Mar 20, 2024 · 2 comments
Closed
3 tasks done

React Bootstrap doesn't let me set background color #39812

reinaldofox opened this issue Mar 20, 2024 · 2 comments
Labels
awaiting-reply css v5

Comments

@reinaldofox
Copy link

Prerequisites

Describe the issue

In my React app the tables suddenly started to appear with a background that I didn't define.
image

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:
image

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
@julien-deramond
Copy link
Member

julien-deramond commented Mar 20, 2024 •
edited

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

@louismaximepiton louismaximepiton mentioned this issue Mar 20, 2024
Open
7 tasks
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 4, 2024

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.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting-reply css v5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@reinaldofox @julien-deramond