Stack Overflow
Stack Overflow

Questions tagged [clsx]

12 questions
2
votes
1 answer

Converting a React component to Typescript Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index

I am converting a React component to typescript, I have an issue and I can not solve it any way, I have no idea what the reason is why I am getting on variantStyles[variant][color] an error. The types are mostly my attempts to create the types…
Klim Yadrintsev
  • 103
  • 1
  • 13
1
vote
1 answer

Conditional CSS class fix

I have many pages, and the home page, if i am in the homepage, i want to make the bg transparent, if the shrink menu is true make it solid (bg-[color:rgb(var(--color-header-bg))]), if i am in other pages make the bg…
jerma lover1
  • 11
  • 4
0
votes
0 answers

How to use Tailwind colors in custom background linear-gradient rule with tailwind-merge?

I'd like to use custom background rule in my tailwind class, something like this: bg-[linear-gradient(110deg,theme(colors.blue.200),45%,theme(colors.white),55%,theme(colors.blue.200))] and this particular class (with colors from tailwind theme)…
rudzky
  • 3
  • 4
0
votes
0 answers

CLSX shadow stacking in React

I am creating a toggle for a react app. Currently, my toggle is two buttons, each having there own shadow, but with my current setup [the shadow overlaps the button when they are side by side].(https://i.stack.imgur.com/YBISd.png), when I want the…
kos96
  • 1
0
votes
1 answer

what is the best pracitse to make reusable react component with different styles using tailwind?

I have a react component with fairly complicated design, styled by tailwind and want to make it reusable with different styles depending on the value of its parameter which called variant. what is the best practice in this situation? 1- make a…
Lana Hanna
  • 91
  • 1
  • 9
0
votes
2 answers

Can't build className dinamically using clsx and Tailwind

Hi there! Not that-skilled-yet Javascript developer here, using React and Next, more specifically this template When it comes to declare component class names, I'm using the following utility function, that combines tailwind-merge and clsx, as…
artu-hnrq
  • 1,343
  • 1
  • 8
  • 30
0
votes
0 answers

Button component prop to change className overrides the default value?

I will try to explain my issue. I have created a button component with a prop named buttonClass which holds a default button class. Using it together with the "clsx" library. default class: "btn text-white rounded-lg" and the buttonClass extends the…
Galanthus
  • 1,958
  • 3
  • 14
  • 35
0
votes
0 answers

Unable to make a transition for Dropdown

I have a dropdown component which has a button on click on it it opens/closes the list box, i want to make the list to appears slowly with transition, i tried it but nothing works, what is wrong in my code?
TSDev
  • 95
  • 7
0
votes
1 answer

How do you use a fallback class for clsx to prevent Typescript complaining?

I have a basic spinner component that accepts a string props for size. I'm conditionally applying the size, however I still get the following type error on the size prop Type 'string' is not assignable to type '"sm" | "md" | "lg" | "xl" |…
unicorn_surprise
  • 951
  • 2
  • 21
  • 40
0
votes
2 answers

React & clsx: add a class name if the current item in a mapped array is the first of multiple items

I've got the following code, and I need to add some new functionality to it. Basically, the map function is iterating through an array, and if there is only one item in the array, then I don't want to add a new class, but if this is the first item…
Mike Earley
  • 1,223
  • 4
  • 20
  • 47
0
votes
1 answer

How to use clsx in nested components in React

I'm using clsx in a React application and I have an issue on how to use it when there are mappings and nested components. For example: return (
Leo Messi
  • 5,157
  • 14
  • 63
  • 125
-1
votes
1 answer

Create a styling rule for clsx for React + Typescript

Having this clsx method which works fine: const getLinkClasses = (disabled: boolean) => { return clsx('flex whitespace-nowrap', { 'text-gray-500': !disabled, 'text-gray-300 cursor-not-allowed': disabled }); }; There are two other…
Leo Messi
  • 5,157
  • 14
  • 63
  • 125