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.
Related
I'm using font awesome and have imported it in index.js
import '././styles/fontawesome/css/fontawesome.min.css';
following in filter component
<span onClick={this.togglem.bind(this)}>
{/*<span className="rTitle">Filters</span>*/}
<i className="fa fa-filter" aria-hidden="true"></i>
</span>
Here, the icon fa-filter is not getting displayed can anyone lemme know whats going wrong
Using double dots its throws this exception:
You attempted to import
../../../styles/fontawesome/css/fontawesome.min.css which falls outside of the project src/ directory. Relative imports outside of
src/ are not supported.
structure is
src/filter.js
src/styles/fontawesome
version -5.5.0
i've imported in filter pointings are all right it show the css styles
when inspected but does not show the icon
Your import looks wrong import '././styles/fontawesome/css/fontawesome.min.css'; you're probably looking for import '../../styles/fontawesome/css/fontawesome.min.css'; (pay attention to the dots).
If you're using React with JSX (you're most likely doing it) you need to use className to define html class attribute:
<i className="fa fa-filter" aria-hidden="true"></i>
Also, the right way to use FontAwesome in React in documented here: https://fontawesome.com/how-to-use/on-the-web/using-with/react
I am trying to set an onClick event on a fontawesome icon but it doesnt work when I do this.
<i class="fab fa-accessible-icon" onClick={this.removeItems}></i>
It only works when I put the onClick on p tags or h tags like this.
<h1 onClick={this.removeItems}><i class="fab fa-accessible-icon"></i></h1>
It is not possible to set event on icon itself? Doing this the second way is causing me style errors.
Edit: I did change the class to className, my bad. but its still not working and currently im bypassing it using around the icon and having the onClick on the span.
Here you can look into react docs which explains to use className instead of class.
Also wrap your <i> tag in button tag and use onClick() function there.
Well it should work like below...
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<i class="fa fa-cog" onClick="console.log('Clicked')"></i>
If its not try to wrap your icon into a button
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<button><i class="fa fa-cog" onClick="console.log('Clicked')"></i></button>
Perhaps try
<i className="fab fa-accessible-icon" onClick={this.removeItems}></i>
I was able to get
<i onClick={doSomething}>Testing</i>
to handle the click event, but it was rendered as jsx (ala render() method) -- assuming you are doing likewise.
You are confusing JSX with HTML. The i tag you have in your code is not plain html tag it is a javascript object(read more about jsx here). React takes care of binding the events for you, don't worry if you can't see onClick in your html.
Change class attribute to ClassName
<i className="fab fa-accessible-icon" onClick={this.removeItems}></i>
I think its work. check the demo https://stackblitz.com/edit/react-nh2bqu
If you're using react-fontawesome, you can use the FontAwesomeIcon component, and set both an id and an onClick:
<FontAwesomeIcon id={yourIdGoesHere} icon={faEdit} onClick={this.editItem} />
...
editItem = event => {
let idOfClickedIcon = event.currentTarget.id
...do something with the item associated with the id
}
"html.format.wrapAttributes": "force-align" not work on jsx.
I would like format
<RenderView key="1"
className="hah"
data="data"
/>
to
<RenderView key="1"
className="hah"
data="data"
/>
How to did it?
VS Code does not use the html.* formatting settings for jsx out of the box.
Please try using one of the alternate JavaScript formatted extensions on the marketplace, such as react-beautify, for this formatting style
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
}
Can not find a clear way to use Bootstrap with Meteor-React combination. There are a number of packages in Atmosphere which expected to exposure global variable with consequent references to Bootstrap functionality, but after, for example,
meteor add universe:react-bootstrap
import BS from 'bootstrap';
system complaints that 'bootstrap' is not defined.
What I did now, I included CDNs for Bootstrap nd jQuery directly into my client's main.html, and got it working:
render() {
return (
<li>
{this.props.ad.text}
<button type="button" className="btn btn-default btn-lg">
<span className="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</li>
);
}
But it is not seems a good solution. jQuery is included in Meteor app by default, how to reference it? When I tried to add twbs:bootstrap package, it is also not clear how to include it in html. Simply added, it does not work.
To use React with Bootstrap, you should use this module react-bootstrap. It has been out there for sometimes and seems still good. I use it for some of my Meteor React projects, I have nothing to complain till now.