Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow styles or classNames passthrough

See original GitHub issue

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.

Issue Analytics

State:
Created a year ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

Johann01commented, Nov 21, 2022

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>
    </>
  );

0reactions

joekendalcommented, Dec 23, 2022

At least need to edit the Card rounded and shadow classes