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
}
Related
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.
Currently, in React I write my css in css modules. However, I also use the font-awesome library which uses normal css.
So my question is there is a way to use a normal css and css module on the same selector?
<i className={classes.icon} + "far fa-user" />
Thanks to ES6 syntax, you can write it like this:
<i className={`${classes.icon} far fa-user`} />
If you completely understand how React works, you will be putting it this way:
<i className={classes.icon + " far fa-user"} />
The classes.icon will be the className string and along with it, you have to add other classes.
I have a ChipInput like this. I want to show a hint text when it's empty.
<div className={classes.headline}>
<ChipInput
hintText='Type anything'
onChange={this.handleTagChange}
/>
</div>
But my browser gives this warning.
Warning: React does not recognize the hintText prop on a DOM
element. If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase hinttext instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
As per the ChipInput Readme, it should work. Am I missing something here?
Had a look at the code and found placeholder which worked!!!
<div className={classes.headline}>
<ChipInput
placeholder='Type anything'
onChange={this.handleTagChange}
/>
</div>
I want to add style my modal so it has (making the modal the full width of the screen and pushing it down the screen):
width: "100%,
top: "25px
to the
<div class="modal-dialog" role="document">
as it appears on the regular bootstrap modal (http://getbootstrap.com/javascript/#modals), or when react-bootstrap is used, the div is
<div class="custom-modal modal-lg modal-dialog">
but looking at the react-bootstrap site, (https://react-bootstrap.github.io/components.html#modals) we only have access too
<Modal/>
<Modal.Header/>
<Modal.Body/>
and applying those CSS settings to those won't give me the styling im looking for
If you look to the Props section for modals, it explains what possible customisations can be set on each of those (Modal, Modal.Header, Modal.Body).
For example, to add a custom-modal class to the modal-dialog element, the property dialogClassName can be set:
<Modal dialogClassName="custom-modal">
//Modal content goes here
</Modal>
Property documentation
Example with custom css class
I'm trying to render the following component:
function deviceready() {
ReactDOM.render(
<div class="container">
<h1>Hello <small>World</small></h1>
<button class="button-primary" onclick="initFacebook()">Login with Facebook</button>
</div>,
document.getElementById('frame')
);
}
...With the reactify gulp plugin. However the attributes don't get compiled. class="container" and class="button-primary" and onclick="initFacebook()" do not appear in my generated HTML.
I'm aware that custom attributes are not supported but these are attributes defined by HTML spec. Any ideas what I'm doing wrong?
Notice the differences pointed out in Facebook's JSX in-depth article.
class should be className
Also notice the Event System; the prop names don't match up exactly with the HTML attribute names
onclick should be onClick