I am creating a component in my react app however, I don't want to use global styling, but modules. The problem is that one of the classNames is an expression, how do I style it in with modules. Below is my code.
<div className="container">
<div className={`current image ${move}`}>
{images[this.state.index]}
</div>
<div className={`next image ${move}`}>
{images[this.state.next]}
</div>
</div>
how do I convert the expression <div className={`current image ${move}`}> to be styled in module.
for example, in modules <div className="container"> will be <div className={style.container}>.
thanks.
Simple answer to your question, to solve the above all you have to do is to concatenate the classnames into a single string, almost as you have done.
It can look something like this:
<div className={[style.next, style.image, style.move].join(" ")}>content...</div>
Here we simply construct an array of the module classnames and then join it together with a space as a separator.
If you however want some classes to be conditional, i recommend the npm package classnames. Then it could look something like this instead:
<div className={classNames(style.image, {
[style.current]: isCurrent,
[style.move]: isMoving
)}>
given that isCurrent and isMoving is declared boolean somewhere above this snippet.
Related
https://tailwindcss.com/docs/background-image#arbitrary-values
this is how I want to use Tailwind bg-image feature. This does not work using SvelteKit next 160 and Tailwind 3.0.9.
Code:
<script>
import globe from '$assets/bg/bg_globe2.png'
</script>
<div
class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
//children
</div>
the bg-[right_-14rem_bottom_-10rem] class works without problems, so I assume Tailwind has problem with Svelte file paths?
EDIT:
output from console.log(globe) is src/assets/bg/bg_globe2.png.
❌ Arbitrary values cannot be computed from dynamic values
<div class="bg-{ userThemeColor }"></div>
✅ Use inline styles for truly dynamic or user-defined values
<div style="background-color: { userThemeColor }"></div>
https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
Tailwind needs to find the full text value in your code to be able to generate the utility classes.
In react I am using scss for styling and when I set the style of an element it is always set like this: <div className={styles.container}> </div>. which is connected to a stylesheet that I have linked to the style variable. Is there a way I can set the style name dynamically without using any other libararies?
For example, var i = 'error'. And then set the style to something like this <div className={styles.[i]}> </div>. Which would use the class .error in the scss file.
remove the dot and it should work fine
<div className={styles[i]}> </div>
I am new to react and could not grasp the concept between bsClass and className.
I try to implement a modified button style, like:
<Button bsClass="btn-custom" >Custom button</Button>
where it does not work when I substitute bsClass with className.
But in other part, using the same custom.css source, I implement:
<img src={logo} alt="logo" className="app-logo" /> and it works.
JSX attribute className is equivalent of HTML class. So the below JSX
<span className="app-logo">Logo</span>
will be equivalent to the below in HTML
<span class="app-logo">Logo</span>
As per bsClass is considered in
<Button bsClass="btn-custom" >Custom button</Button>
it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like
<button className={this.props.bsClass}>{this.props.children}</button>
So it an attribute that is defined as a property by the react-bootstrap docs.
React's className is exactly equivalent to regular classes in CSS.
HTML/CSS:
<div class='red-text'>
Foo
</div>
React/JSX:
<div className='red-text'>
Foo
</div>
The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.
As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.
A practical difference. I you set bsClass to something other than what REACT-Bootstrap has as a default, you have to do your own css themeing of the button.
By adding a className="xx" you still get the default theme, but you can now add css styles for color, padding, etc, using your own .css
.xx {
magin-bottom: 2px
}
Is it possible to add a complex class to a div like this:
<div class="{{'border-wrp'}} {{pageType}} {{borderStyleClass}} {{borderColourClass}}" > </div>
THanksss
ng-class is used to add classes conditionally.
Like this
<div ng-class="{'yourclass':true,'yourclass1':false}"></div>
I am quite used to seeing
div.class1
and
#someId.class1
but what about
.class1.class2
? And I think it is identical to
.class2.class1
? Because there was an element with id someId but now we have two elements of this type showing on the page, so I want to add a class and use the class instead of id, therefore the .class1.class2 instead of #someId.class1
It will select items with both classes. So not items with either one.
<span class="class1 class2"></span>
Yes, it is both legal and common. In the element, you would have something like this:
<div class="class1 class2">Hello</div>
It's nice for syntactic styling. To give you an example, let's say you have the following html:
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
You can add a second (and third, forth, etc.) class that modifies "box". For example:
<div class="first odd box">
</div>
<div class="second even box">
</div>
<div class="third odd box">
</div>
<div class="fourth even box">
</div>
Then, in styling, to style different box groups, you can do the following:
.odd.box {
}
.first.box, .fourth.box {
}
.first.box, .even.box {
}
This will be interpreted by the browser if you give your element does two class:
.class1.class2{width:500px;height:300px;}
<div class="class1 class2"> </div>
If you do like this, it will not be interpreted, resulting on a div with no styles:
.class1.class2{width:500px;height:300px;}
<div class="class2"> </div>
This will be interpreted (resulting on an element with a dimension of 500px X 300px:
.class1 {width:500px;}
.class2 {height:300px;}
<div class="class1 class2"> </div>
The common use of css, is to tell the browser that a certain element with and ID or CLASS of a certain name will get a set of styles, or tell the browser that a certain ID or CLASS will get a set of Styles, like so:
Ex 1:
.class1 {width:500px;} -> elements
with this class will get 500px of
width.
Ex 2:
div.class1 {width:500px;}
-> only a
div element with this class will get
500px of width.
Ex 3:
div.class1, h1.class1 {width:500px;}
-> only a div and a h1 element with this class will get 500px of width.
You can read valid information about css at:
W3C CSS SYNTAX PAGE
Just wanted to confirm the answer given by Jouke van der Maas,
which is the right answer. I would like to quote the following
excerpt from the CSS 2.1 specification:
5.2 Selector syntax
A simple selector is either a type selector or universal selector
followed immediately by zero or more attribute selectors, ID
selectors, or pseudo-classes, in any order. The simple selector
matches if all of its components match. [snip]
Since the .classname selector is equivalent to the [class="classname"] selector,
it is an attribute selector. Note the "in any order" bit. Hence the selector
.class1.class2
is identical to the selector
.class1.class2
and matches both elements like
<span class="class1 class2">Hello World</span>
as well as
<span class="class2 class1">Hello World</span>
which is the same thing, as well as
<span class="class1 class2 class3">Hello World</span>
etc...
You can also get even more fancy.