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>
Related
I use react-slick library and it turns out that it sets its own "dir" attribute. I set the direction for the whole app in the main container, but react-slick overrides it for itself. Is there any option to fix this?
<div dir="rtl" className={appClassName}>
<div slick-slider slick-initialized dir="ltr">
// some code
</div>
</div>
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.
I am looking for the best way to inject a dynamically built image as my background image. I can build the image and I can display it as a div but I want it as the background of my body.
<div className="App">
<mycomonent />
</div>
works but it is not what I want
<body styles="background-image: {mycomponent}"></body>
You can change using regular DOM object within React.
document.body.style.backgroundImage = `url("https://www.placecage.com/c/460/300")`;
Working Demo
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
}
I'm creating a layout generator for flexbox and I'm using AngularJS 1.5.7 components. Basically, my issue is that "replace" does not exist for component but I'd like to be able to dynamically style the root element of my component.
Say that I have a main "div" with its display set on "flex". When I click on a button, it adds a component in this "div" which will be the items of the flexbox layout. The HTML generated is:
<div style="display:flex;">
<item>
<div style="flex-grow:1;..."></div>
</item>
</div>
My issue is that the styles are applied to the "div" inside the "item" element, but "flexbox" does not work as expected as the "item" element does not have any flexbox-related styling. Note that the idea is that I also have some dropdown and textbox used to modify the CSS properties of the "item" component. The template of this one looks like:
<div class="zone" data-ng-style="$ctrl.model.getStyle()">
...
</div>
And I'm inserting this component like this:
<item model="$ctrl.item"></item>
Then, my question is: "What's the alternative to 'replace' property of directives?" or "How to dynamically style the root element of the component?".
Thanks
I was hesitant about using some Angular-only classes such as .ng-isolate-scope (due to .component() always using isolate scopes), but you could be able to provide styles for your own component:
item {
flex-grow: 1;
}
If you would like to dynamically apply classes specific to your element, you could follow the same pattern.
item.selected {
font-weight: bold;
}
Nevertheless, I'm not sure about how compliant it could be with older IE versions, though.