I have a react.js web app and a REST API that returns a chunk of raw HTML (not a complete page). I get the HTML by scrapping a website and grabbing a piece of the markup using cherrio.js. In the developer tools, the response itself is the markup. I use the dangerouslySetInnerHTML={{ __html: htmlMarkup }} element attribute so that react knows to display it as the inner HTML.
However, I need to insert some FontAwesome icons into it. I've tried both straight HTML using, <i class="fa-solid fa-star-sharp"></i>, and the react version, <FontAwesomeIcon icon="fa-solid fa-star-sharp" />. Both of these come straight from the FA docs.
Within my component that inserts the HTML I import the FontAwesomeIcon component (import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";) and also import the FontAwesome CDN CSS file using a SASS file that I import into my root JS file. I also import the #fortawesome/fontawesome-svg-core/styles.css file.
SASS file: fa.scss
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css);
index.js
import 'fa.scss';
However, after I load the HTML markup, insert my icon, and then set the dangerouslySetInnerHTML attribute, my icon doesn't display.
What am I missing?
Related
I am using Google Apps Script and Google Sites to serve a web-app and I would like to take full advantage of the Vue Single File Components. However, in order to use CSS stylesheets you need/ to inline them.
Normally with a hand crafted CSS file I inline it as follows in the head tag of the html template:
<style>
#import './style.css'
</style>
*With a minimal Vue application, (single component with a p tag and a style setting the text colour to red)
When I run a parcel build ./index.html it creates the HTML with the JS file, but a separate CSS file is also created and not in-lined.
Can I get Parcel to inline the separate CSS file into the head of the HTML file?
I've imported some CSS files with
<style scoped>#import "../assets/XYZ.css";</style>
in different components. Now whenever I switch components the CSS from the other component is loading as well. Let's say I switch from Home.Vue to Blog.Vue, then Home.Vue's CSS file will be imported into Blog.Vue too. Whenever I refresh, everything seems to be fixed. Adding scoped doesn't seem to work for me.
I am using vue-router to switch between components.
This is my relevant code:
main.js
import './assets/main.css';
^ This is a css file to be used across my website on every component
Home.Vue
<style scoped>#import "../assets/home.css";</style>
Blog.Vue
<style scoped>#import "../assets/blog.css";</style>
I am relatively new to VueJS, and currently I run into an issue with styles related to semantic ui. The problem is that semantic ui's styles overload custom styles. And the CSS developer told me to make sure that semantic ui's css is loaded before all other css files.
Notably, my current code looks like this:
App.vue
<template>
...
</template>
<script>
export default {
name: "App",
};
</script>
<style>
#import "styles/my_custom_css.css";
</style>
main.js (only relevant part, might not be a working code)
import Vue from 'vue';
import App from './App.vue';
import SuiVue from 'semantic-ui-vue';
import 'semantic-ui-css/semantic.min.css';
Vue.use(SuiVue);
new Vue({
el: '#app'
render: h => h(App)
});
I wonder how to ensure that semantic.min.css is loaded before styles/my_custom_css.css. Maybe I need to reorganize the code structure ?
you could import it in the same place, but before your own .css-file
// App.vue
<style>
#import 'semantic-ui-css/semantic.min.css';
#import 'styles/my_custom_css.css';
</style>
And the CSS developer told me to make sure that semantic ui's css is loaded before all other css files.
He is right. because css stands for cascading style sheet. the styling is adjusted line by line.
Whatever is called first will be adjusted first. So the last line of the styling will always be the one actually used. The term cascade gives you the hint. If you put your css before the semantic one, the semantic one overwrites your css and vice versa.
In my page, I have to use two react components
Component1 and Component2
Page1 code
<Component1/>
<Component2/>
All the styling for components would come from the component CSS files. But for the page layout, I have page1.css
I would write selectors and classnames and define styles for page1.css.
There could be many pages and different layouts with similar classnames, how can we control the behavior of not having overriding styles.
You can use CSS module to apply the style to each component, it works so well, easy to manage code and it is local selector as well, so there is no conflict between 2 component.
Project tree will be like:
Component:
Button
Button.js
Button.module.css
Form
Form.js
Form.module.css
Avatar
Avatar.js
Avatar.module.css
Each component will have a unique css file to come with, so it is very easy to maintain the code when scaling up.
How to use:
create-react-app
Install css-loader
Create css file with add-on module at the file name ex: styles.css => styles.module.css
4.Import styles to component:
import styles from './styles.modules.css'
5.Add classname to JSX tag
<div className={styles.header}> Hello world</div>
Start styling your component by using normal CSS
You can use css specific to that component only:
page1.js
import './page1.css'
// page1 component
I suppose page1 component folder structure like:
page1/
page1.css
page1.js
I am trying to convert my ReactJS application to Universal App with server-side rendering, but there is something that I don't understand. What is the best way to use and import styles to my components? Can I just import external stylesheet in HTML and use this all over my components? or import specific stylesheet to every component and use it as separate variables like this :
import s from './about.css';
export default class About extends Component {
render() {
return (
<div>
<div className={`${s.divone} row`}>
<span>Hello world</span>
</div>
<div className={s.divtwo}>
<span>bye world</span>
</div>
</div>
);
}
}
with the second approach, I have noticed that every time I do refresh my page, the styles are kinda too slow to load, and for one second I see my page without any CSS, and then I see my full page with CSS. There is any way to bypass that without external and global stylesheet? Like for example, Airbnb does. Maybe with some way to wait until all styles are loaded?
Also after I moved my app to server-side render, I get some strange warnings like this :
You can use classnames, a simple and small JS library to import and use css in your react components:
import styles from './css/yourcss.css'
import classnames from 'classnames/bind'
const cx = classnames.bind(styles)
// use in react component
<div className={cx('mydiv')}></div>
cx can have any JS expression inside it or just plain class name from css you have imported styles from.