Allow styles or classNames passthrough

[wburningham]

I'm trying to add a simple variation of small-caps to a Title component. I don't think this is possible today unless Tremor components pass through the styles or className props. I prefer to use Tailwind (I love that Tremor is built on top of it) and I would love to be able to add tailwind classes to Tremor components.

[mitrotasios]

hi @wburningham, thanks a lot for the feedback! Unfortunately something like this is not possible at the moment, because we have defined interfaces with specific props for each component. Implementing a new prop such as className is rather tricky (for now) because most of the components are nested, thus we would need to think about an appropriate design to implement this. We are currently discussing what level of customisation we would like to give to the user, as we want to find a balance between easy-to-use/good looking components vs customisation tailored to everyone's use case. Therefore we are gathering feedback from our users to determine which path to follow. So we are always happy for any sort of input on the library! 😊

[Johann01]

A small trick that I use as a workaround maybe someone need is.

I do a wrapper div and then add the CSS with a selector:

 const CLASSES = clsx(
    "[&>div>table>tbody>tr>td]:!pb-2",
    "[&>div>table>tbody>tr>td]:!pt-2",
    "[&>div>table]:!h-96",
    "[&>div.tremor-base.tr-absolute]:!bg-white",
    "[&]:overflow-scroll h-96"
  );
  
  return (
    <>
      <div className={CLASSES}>
        <Table>
          <TableHead>
            <TableRow>
              <TableHeaderCell>Name</TableHeaderCell>
              <TableHeaderCell textAlignment="text-left">Leads</TableHeaderCell>
              <TableHeaderCell textAlignment="text-left">
                Sales ($)
              </TableHeaderCell>
              <TableHeaderCell textAlignment="text-left">
                Quota ($)
              </TableHeaderCell>
              <TableHeaderCell textAlignment="text-left">
                Variance
              </TableHeaderCell>
              <TableHeaderCell textAlignment="text-left">
                Region
              </TableHeaderCell>
              <TableHeaderCell textAlignment="text-left">
                Status
              </TableHeaderCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {transactions.pages.map((item) => (
              <>
                {item.transactions.map((item) => (
                  <TableRow key={item.nameReferenzkonto}>
                    <TableCell>{item.nameReferenzkonto}</TableCell>
                    <TableCell textAlignment="text-left">
                      {item.verwendungszweck}
                    </TableCell>
                    <TableCell textAlignment="text-left">
                      {item.betrag}
                    </TableCell>
                    <TableCell textAlignment="text-left">
                      {item.waehrung}
                    </TableCell>
                    <TableCell textAlignment="text-left">
                      {item.buchungstag.toLocaleDateString()}
                    </TableCell>
                    <TableCell textAlignment="text-left">
                      {item.beguenstigterOrAuftraggeber}
                    </TableCell>
                  </TableRow>
                ))}
              </>
            ))}
          </TableBody>
        </Table>
        <Footer height="h-10">
          <div className="w-full" />
          <ButtonInline
            size="sm"
            text="Load more"
            icon={ArrowRightIcon}
            iconPosition="right"
            handleClick={() =>
              fetchNextPage({
                pageParam:
                  transactions.pages[transactions.pages.length - 1]?.cursor,
              })
            }
          />
        </Footer>
      </div>
    </>
  );

[joakimbeng]

To get the scrolling working with the sticky headers I did:

<div className="[&_>_div]:max-h-[42rem] [&_th]:bg-white">
  <Table>
    <TableHead>
		...

Thanks for the tip @Johann01!

[john-tipper]

Thanks for the tip @Johann01, I think this may be a way of injecting dark mode classes for #208.

[severinlandolt]

Relates to #135

[joekendal]

At least need to edit the Card rounded and shadow classes

[github-actions[bot]]

:tada: This issue has been resolved in version 2.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[steventsao]

because most of the components are nested, thus we would need to think about an appropriate design to implement this. We are currently discussing what level of customisation we would like to give to the user, as we want to find a balance between easy-to-use/good looking components vs customisation tailored to everyone's use case. Therefore we are gathering feedback from our users to determine which path to follow. So we are always happy for any sort of input on the library! 😊

Hi, is there a post on where tremor is going with the balance between "good looking" presets vs. customization with className? I imagine exposing className satisfies the customization needs, but what about the original intent of limiting customization for a good preset? I imagine that with className, there is no balancing anymore because the customization is infinite. That being said, infinite customization is not mutually exclusive with offering presets either.

Just curious from the standpoint of designing a library, thank you! @mitrotasios