We Keep Coding

Font-size with typescript customized font-awesome component [duplicate]

Solved - TLDR; Adding import '#fortawesome/fontawesome-svg-core/styles.css' to the _app.js / index.js file fixes the issue and FontAwesome works as intended. My issue was caused by npx-create-next-app including purgeCSS by default, which in turn stripped out the FontAwesome required styles.
I'm using FontAwesome in my Next app. I followed the React guide on the FA website and the icon SVG's are being output on the page. Problem is, none of the features work and they don't scale with font-size as they're meant to.
I don't want to hack it together by manually targeting the SVG's and adding size etc. as it's not ideal when it comes to responsiveness. i.e. it would be nice to have icons scale with accompanying text and the ability to add 'spinner', 'fixedWidth' etc.
Strangely, they have started working once or twice but then break again and I can't seem to reproduce.
// package.json
"dependencies": {
"#fortawesome/react-fontawesome": "^0.1.14",
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/pro-regular-svg-icons": "^5.15.2",
}
// _app.js
import { library } from '#fortawesome/fontawesome-svg-core'
import { faHeart } from '#fortawesome/pro-regular-svg-icons'
library.add( faHeart )
// header.js
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export default function Header() {
return (
<header>
<FontAwesomeIcon icon={['far', 'heart']} spin />
</header>
)
}
// style.css
header {
font-size: 20px; (does nothing to the icon)
}
svg {
width: 20px; (works, but this shouldn't be required according to FA docs)
}
I've also tried individual use (importing icons into individual components, rather than utilising the library function) to the same effect. Like so:
// header.js
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faHeart } from '#fortawesome/pro-regular-svg-icons'
export default function Header() {
return (
<header>
<FontAwesomeIcon icon={faHeart} spin />
</header>
)
}

Fixed it. The issue was purgeCSS which was added to the project when using npx-create-next-app. purgeCSS was purging the required FontAwesome styles.
Explicitly importing the FontAwesome styles fixed the issue.
Specifically, I added import '#fortawesome/fontawesome-svg-core/styles.css' to _app.js.

According to the doc, The react-fontawesome component integrates well with Next.js but there is one caveat you need to solve. Since Next.js manages CSS differently
In your project entry, probably App.js
import { config } from '#fortawesome/fontawesome-svg-core'
import '#fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
Next.js allows you to import CSS directly in .js files. It handles optimization and all the necessary Webpack configuration to make this work.
import '#fortawesome/fontawesome-svg-core/styles.css'
You change this configuration value to false so that the Font Awesome core SVG library will not try and insert elements into the of the page. Next.js blocks this from happening anyway so you might as well not even try.
config.autoAddCss = false

I use FontAwesomeIcon in my React apps like this and it works:
import { faHeart} from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
in the code:
<FontAwesomeIcon className="icon" icon={faHeart} />
and in css:
.icon{
color: ; / if you want to change color
font-size: 36px;
}

Essentially, all you need to do is:
import the icon:
import { yourIcon} from "#fortawesome/free-solid-svg-icons";
and use it:
<FontAwesomeIcon icon={yourIcon} />
You can add a classname to the icon and use that class to style it.
<FontAwesomeIcon icon={yourIcon} className="styled-icon" />
Here is a good video on adding font awesome icons to next.js: https://youtu.be/kaA2aX4X3NU

Error trying to style a component directly with styled-components

I'm trying to style a component like this:
function _MenuItem({label, icon}){
return <div>
{icon}
<p>{label}</p>
</div>
}
export const MenuItem = styled(props => <_MenuItem {...props} />)`
color: red;
p{color: red}
*{color: red}
`
The component is rendering, but the styles are not being applied.
I have managed to apply the styles by making a styled div and creating the component from that div, but I was wondering if there is a way to apply the styles directly to the component?
I am very new with react and more with styled-components so I assume that I have misunderstood some basic concepts.

Making a styled div is the correct way of doing things. I couldn't find anything on styling a component directly nor felt the urge to done it before.
Even when the styled-component docs describe how to style any component, they are basically styling an element just with a different syntax.
There doesn't seem to be a good enough reason to do what you want to do, since you can achieve what you want to achieve by using the styled components as intended.
The following way of doing things works and it is super simple:
import styled from "styled-components"
const _MenuItem = ({label, icon}) => {
return <Root>
{icon}
<p>{label}</p>
</Root>
}
const Root = styled.div`
color: red;
p{color: red}
*{color: red}
`
export default _MenuItem;
Please let me know if I'm missing some specific use-case or something other.

component next/image are not working with CSS

I was trying to make border around an image and my custom css was not working because of Image component css, it was overriding over my custom css and also applied tailwind and bootstrap to fix it but I was unable to fix it. Now I am not getting any clue to fix it I read some github issues but they are not enough to fix it.
code:code link

Example of how to use :global(_selectors_here_) with !important:
import Image from "next/image";
import sli from "./sl.png";
export default function IndexPage() {
return (
<div>
<Image className="ava" src={sli} alt="hello" />
<style jsx>{`
:global(.ava) {
border: 3px solid red !important;
}
`}</style>
</div>
);
}

To make className work in external component, you have to either use :global or the resolve tag.
And to override inline styles, with tailwindcss, you can use important modifier like !border.

Apply CSS theme based on react state

I have a REACT application (bootstrapped with create react app and react-bootstrap) for which I am trying to add option to switch to DARK theme if user enabled this in his settings. I am storing the settings on server and fetching them into properties.
I have a separate stylesheet called dark.css where all my component styles are overriden.
dark.css (example):
#root {
background-color: var(--dark);
color: var(--light)
}
.card {
background-color: var(--dark); // overriding bootstrap styles here
}
I am trying to apply it at the root of my application like this:
componentWillReceiveProps() {
if (this.props.profile && this.props.profile.theme === 'dark') {
require('./styles/dark.css');
}
}
It works great when running the application locally with yarn start. But when I actually build the app using webpack, it works really strange. Part of the new styles are applied and part on, regardless of which theme is selected. For example background is applied from the main theme and ignored in the dark theme but text color is the opposite.
Why is this happening?
It seems that the dark stylesheet is not being applied at all when building the app with webpack, although everything looks correctly when running it with yarn start.

I guess that you have a naming clashes, which overrides your css.
React supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention.
CSS Modules let you use the same CSS class name in different files without worrying about naming clashes

I solved my issues simply by importing all styled css sheets and then prefixing them like this:
.dark .card {
color: black;
}
.light .card {
color: white;
}
I assign class to the wrapper based on my props:
<div id="root" className={theme}>
// content
</div>
Works like a charm.

Webpack bundles CSS in the wrong order

At the moment, my webpack is bundling my CSS styles like this:
//this css is going first, it's supposed to go last
.rbc-btn {
color: red;
}
//this css must be first
.myStyle {
color: green;
}
What I want is to bundle my CSS styles in a specific order, something like this:
.myStyle {
color: green;
}
.rbc-btn {
color: red;
}
How can I fix this with webpack?
Thanks! :)

There was a similar bug that was fixed with extract-text-webpack-plugin#3.0.0, ensure you're using the same version or newer.
If that doesn't help, a common mistake is to load a component first and then loading the CSS files. It has become a common pattern to make every component to import their own styles which can change the style order in webpack if your component is loaded first.
Considering you have index.js like this:
import MyApp from './myApp'
import './myStyle.css'
It means to Webpack that every style imported in './myApp' will be loaded first, so styles applied 'myStyle.css' will appear below other styles, thus overriding them.
The fix could potentially be just changing orders
import './myStyle.css' // parent component imports style first
import MyApp from './myApp' // imports your component along with any other styles

Adding on to Cezar Augusto's answer:
If you have module.css, the import order of the components whose module.css is being bundled together will impact the order!
So for me I needed #import for fonts in my css to be bundled on top first, so in my index.js file, I needed to import my module.css file with my #import first before importing my components whose module.css needed to be bundled later.