Questions tagged [class-names]
86 questions
0
votes
1 answer
useEffect is not setting the class in element
A span that has index same as someValue will get a class "someClass" added and rest of the spans will have undefined.
useEffect runs when "scrolled" changes and adds class "greyout" to spans that matches the criteria.
This runs fine on browser but…
peanutz
- 346
- 3
- 6
0
votes
2 answers
how can I add a module style, via props other components
codesandbox
I have a component
const UIComponent = ({ className }: Props) => {
return (
Component
…
Nick
- 33
- 7
0
votes
1 answer
How can I rewrite this conditional css using classnames?
In react component, I'm using css module and I got this conditional css that is working fine, but I would like to refactor it using classnames library.
className = { `${active ? styles.activeLabel : styles.notActiveLabel}
${weight === 'bold' ?…
Judoboy Alex
- 326
- 1
- 14
0
votes
1 answer
How to add a class name in every row without effect the rest of the rows?
How to add a class name in every row without effect the rest of the rows
import React, { useState } from 'react';
import './testEfect.css';
const Test = () => {
const arrayTest = [
{
name: '11',
id: '11'
…
mohamed maher
- 3
- 2
0
votes
2 answers
driver.find_element_by_class_name() but the class name has spaces
Error message : selenium.common.exceptions.InvalidSelectorException: Message: Given css selector expression ". clickable event-link math " is invalid: InvalidSelectorError: Document.querySelector: '. clickable event-link math ' is not a valid…
justin
- 1
0
votes
1 answer
Extra optional classname in a component in typescript
I'm using classnames to add many classes to a React component. In my button I want to have the opportunity to add a class to the component if I want to, it should be optional.
But I get a type error, see attached image
How can I get rid of the…
Sanne Wintrén
- 359
- 1
- 4
- 12
0
votes
1 answer
Gatsby and Classnames library: Apply CSS class depending on content of div
I have a Gatsby project with a blog. I have a tag cloud section that shows the tags for blog posts. I also have a button/header on the actual blog post card that I want to style the same as it's corresponding tag in the tag cloud i.e. if there's a…
Nick Kinlen
- 1,356
- 4
- 30
- 58
0
votes
1 answer
How to add multiple css property with same name in react?
I am using react and came across a situation where I needed a fallback CSS property.
Normal CSS code:
.grid{
position:sticky;
position: -webkit-sticky;
}
Currently, I am getting it done by using two different classes and adding both the classes…
Vivek Sharma
- 531
- 6
- 20
0
votes
1 answer
Name a class which contains other dependent classes
I have a class which will contain list of two dependent classes inside it.
example
Class ActivityHolder{
private ArrayList activityList;
private ArrayList promiseList;
}
My question is how do i name the ActivityHolder class.
[Edit]
I have…
Archan Mishra
- 887
- 7
- 18
0
votes
1 answer
How to use classnames lib with conditional and dynamic classes
I started using classnames lib and it's pretty simple and neat until I hit this case.
I want to make an expandable row animation. Idea is simple - conditionally add class that would add animation to the open row. The hight of the expanded row is…
ElenLo
- 47
- 4
0
votes
1 answer
How to correctly name a class that contains property that returns value selected from sources set in this class and sets source values thes same way?
I've got a class that contains multiple potential sources of value (of same Type ofc) and property that returns value of some source based on provided sources (in order of importance, including internal value). I'd simply call it Provider, but…
Servail Catseye
- 122
- 1
- 5
0
votes
1 answer
Why is className showing up in my style rule?
I'm trying to apply a keyframe animation to fade out an element, but when that class gets added to the element, it appears to adjust the rule itself and injects the className into the rule to reference the fadeOut keyframe.
user161592
- 358
- 1
- 2
- 12
0
votes
5 answers
Conditionally render a badge for active/inactive User
I am trying to render conditionally a badge, based on the logged condition of a user. If the props coming from the server is true, then the badge is green, else grey.
I have tried various solutions, from basic if/else in the JSX, to classNames but…
user10104341
0
votes
1 answer
React Is it good way to use classnames for managing multiple themes?
Consider the following code:-
render() {
const headerClasses=classnames({
"Header":true,
"Header---dark":this.props.theme.dark,
"Header--light":this.props.theme.light
})
return (
Unity Hour
- 550
- 2
- 7
- 22
0
votes
1 answer
Animating a fade out element in a react component
I am creating a fade out warning/error message (bootstrap style) in a react component, and I am having some issues with the fade out timing.
My fade out works fine so far, and this is how it's done now:
import React, { Component } from…
gianni
- 1,199
- 2
- 14
- 28