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.

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

Already on GitHub? Sign in to your account

How do I get rid of default header background? #531

Closed
apieceofbart opened this issue May 15, 2020 · 3 comments
Closed

How do I get rid of default header background? #531

apieceofbart opened this issue May 15, 2020 · 3 comments
Labels

Comments

@apieceofbart
Copy link

apieceofbart commented May 15, 2020

I am trying to change the default styling for the table in general but let's focus on header cells. By default they have a controversial 馃槂 gradient and I would like to get rid of it.

I tried

<Cell style={{ background: "none", backgroundImage: "none" }}>
  First Name
</Cell>

But this sets a style on element with classes fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1 while the background is set on parent element with classes fixedDataTableCellLayout_main public_fixedDataTableCell_main

I could try some hacks like setting the background color to white or overwriting the classes in css but surely there's a proper way to do it that I am missing - otherwise how could you even use this library?
Here's the sandbox - it's the example I copied from the InfinteScroll:

https://codesandbox.io/s/fixed-data-table-2-infinite-scroll-6svwz?file=/src/InfiniteScrollExample.tsx

@wcjordan
Copy link
Member

Unfortunately the CSS for the library isn't very extensible. Your best bet is probably to override styles using !important.

Alternatively you can use any component you want for the Cells. The Cell component is just a default to help you get started. I recommend not using it and using your own component styled as you'd like. But the class you mention fixedDataTableCellLayout_main public_fixedDataTableCell_main is on the parent component and would still be there as a parent DOM element to your cell.

This is an unfortunate decision made by the FB devs on the original FDT. We have #60 and #61 ticketed out to improve it if you'd like to work on a better solution and submit a PR. Thanks

I'm going to close this but feel free to ask any follow ups here or add longer term ideas to #60 & #61

@apieceofbart
Copy link
Author

@wcjordan Thank you for detailed explanation - I was afraid that is going to be the answer. I will check the tickets you mentioned.
I think a solution also could be to just create your own stylesheet based on the default you give (since I am importing it anyway).
Do you think docs update would be a good idea?

@wcjordan
Copy link
Member

Sure, that sound like it would be worth adding to the docs if it works well for you. Feel free to submit a PR. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants