Questions tagged [clsx]
The clsx tag has no usage guidance.
clsx
16
questions
1
vote
0
answers
80
views
Set up of NativeWind with className management libraries
I am working on a React Native with Expo project. I would like to set up NativeWind the same way that I normally use Tailwind. Usually, I install these libraries: clsx and tailwind-merge. Then I used ...
- 326
0
votes
0
answers
65
views
Using clsx library for conditional CSS class composition, but getting unexpected behaviour
While I was learning about clsx library for conditional CSS class composition, I tried to experiment with it by implementing active links on navbar. I have created this rough nav-link component. The ...
1
vote
1
answer
91
views
Click and display child component delay/animation in React
I'm trying to create a component that, upon clicked, will display it's children component(s).
I have this code:
type ExpandCollapseProps = ComponentProps<"div"> & VariantProps<...
- 377
0
votes
0
answers
97
views
How to dynamically align FullCalendar event title in Typescript with Next JS?
This is what I have for now, it notable does not work, and I am really not sure how to tackle this at the moment. Basically I want it so when the user presses '8:00 AM' on the modal it aligns the text ...
-2
votes
1
answer
173
views
What's the syntax of clsx to add two classNames when one condition satisfied?
I have a menu block, i use clsx lib for the conditional classname rendering.
I wanna add two className at the same line when the condition satisfies. Some one can tell me the right syntax ?
For now i ...
- 33
1
vote
1
answer
62
views
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 ...
- 33
0
votes
0
answers
117
views
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 ...
- 23
1
vote
1
answer
475
views
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 ...
- 91
1
vote
2
answers
2k
views
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 ...
- 1,437
2
votes
1
answer
74
views
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 ...
- 111
0
votes
0
answers
181
views
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: &...
- 2,170
0
votes
0
answers
24
views
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 ...
- 95
0
votes
1
answer
79
views
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 ...
- 1,091
0
votes
2
answers
2k
views
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 ...
- 1,283
-1
votes
1
answer
1k
views
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-...
- 5,956