Override the library styles by className (Tailwind CSS)

[bezvrednyy]

Please add the ability to override the styles of ALL library components, now the built-in className overrides the custom one.
I have a need to dynamically define a background for EACH row. But the component:

1. Overrides my className
2. Does not accept style prop

I don't like to use style prop. And I really want my className to override the library styles. I think it's not difficult to do and will bring a lot of joy!

[bezvrednyy]

Yes, I can add additional className some 'active' if I wanna mark row. And describe styles for this className in useTheme. But I think it looks like a crutch, and it can be greatly simplified.

[rwieruch]

Can you give an example of how this should look like in code?

[bezvrednyy]

It should work like this:

1. I add my custom className on Row, Body, Cell, etc. <Row item={row} className='bg-blue-200'>
<div role="row" class="tr tr-body row-select row-select-clickable bg-blue-200 clickable css-13uk44u-getRowContainerStyle-Row">
2. And my className "bg-blue-200" should override "css-13uk44u-getRowContainerStyle-Row", not the other way around as is happening now:
   

[rwieruch]

Thanks!

[evanVerinomics]

Yup I'm dealing with similar issues

[rwieruch]

It turns out that there is no way around the inline style taking precedence in the library unfortunately.

However, I read more about Tailwind and how you can define !important globally:

// tailwind.config.js

module.exports = {
  important: true,
}

With version 2.0.33-beta.22 of @table-library/react-table-library you can define it on a table level too:

// tailwind.config.js

module.exports = {
  important: '[data-table-library_table]',
}

Would this help in your case?

[rwieruch]

@mrsolis93 you can use Tailwind in v3.0.0 the following way:

const select = useRowSelect(data);

// get all state
console.log(select.state);

// ... then in the Row component when you assign the className conditionally:

<Row className={select.state.ids.includes(item.id) ? "bg-blue-200" : "bg-red-200"}  ... >

// ... or for single select

<Row className={select.state.id === item.id ? "bg-blue-200" : "bg-red-200"}  ... >

The only thing you need to do in your Tailwind configuration is:

// tailwind.config.js

module.exports = {
  important: '[data-table-library_table]',
}

[geraldodev]

React seems to be favouring static css (which for many means atomic css) https://twitter.com/sebmarkbage/status/1529622371333709825 and reactwg/react-18#110 so It would be very nice to have a good path to integrate tailwind with this library.

[rwieruch]

@geraldodev does the shown example not work for you? If not: How would an ideal API look like instead?

[geraldodev]

Absolutely not. I'm shopping a react table and found yours. important: true worked for me.
If emotion were completely optional that would be great, but I just can thank you for the effort you put into this library.
Looking forward using it.

[rwieruch]

@bezvrednyy can you mark this reply as answer?

[geraldodev]

Absolutely not. I'm shopping a react table and found yours. important: true worked for me. If emotion were completely option that would be great, but I just can thank you for the effort you put into this library. Looking forward using it. Em ter., 14 de jun. de 2022 às 04:56, Robin Wieruch < ***@***.***> escreveu:

…

@geraldodev <https://github.com/geraldodev> does the shown example not work for you? If not: How would an ideal API look like instead? — Reply to this email directly, view it on GitHub <#40 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAF5CCALEIAOZ4PQE6GDDOTVPA3MNANCNFSM5S4QFP4A> . You are receiving this because you were mentioned.Message ID: <table-library/react-table-library/repo-discussions/40/comments/2944756@ github.com>

[PeterEckIII]

The proposed solution of defining important at the table level is not working for me. I am using Remix (https://remix.run/) and when I define important, run npm run build, and then run the dev server all of my CSS breaks as if it's not being compiled. Here's what my tailwind.config.js looks like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{ts,tsx,jsx,js}"],
  important: '[data-table-library_table]',
  theme: {
    extend: {
      boxShadow: {
        followBtnHover: "0 0 0 0 #65c886, inset 6em 3.5em 0 0 #65c886",
      },
      borderColor: {
        followerBtn: "#8fc688",
      },
    },
  },
  plugins: [require("@headlessui/tailwindcss")],
};

When I add a tailwind class to an element

<Row className="bg-blue-500">
{...}
</Row>

Edit: The tailwind class is applied to the Row element, but the remainder of the tailwind styles across my app are still not being applied.
As soon as I remove the important: '[data-table-library_table]', build again, and run the app the tailwind styles compile (from elsewhere in my app), but I still have the issue with the styles being overridden / not applied on the table components. Any help is appreciated! Thanks

[Undead34]

I've been trying for a while and the only thing I've found is to use "!" before tailwind css class. and well try to use the table themes by hand to match tailwind ones.

import * as ReactTable from "@table-library/react-table-library/table";

return (
    <div>
        <ReactTable.HeaderRow className="!bg-blue-200 sm:hover:!tw-font-bold">
            <ReactTable.HeaderCell>Título</ReactTable.HeaderCell>
            <ReactTable.HeaderCell>Artista</ReactTable.HeaderCell>
            <ReactTable.HeaderCell>Album</ReactTable.HeaderCell>
            <ReactTable.HeaderCell>Archivo</ReactTable.HeaderCell>
        </ReactTable.HeaderRow>
    </div>
  );

If I find a very abstract solution for the Themes I will share it with you.