Styled Componets suggestion not working on react - reactjs

Can someone help me with styled-components ? I have installed styled-component in my react app . but when i am going to apply styled div the css suggestion or prefixes or css emmet not coming or showing. I have also install intellisence extension on my vs code. if someone having some suggestions or solutions plz net me know.

Related

Adding React-Slick CSS leads to conflict with Tailwind CSS and destroy base style by tailwind?

[I'm React and Tailwind newbie and this is my first time asking question here].
I have coded a movie-app using tailwind css, after all things done, I added React-Slick in to the Main.Js (Hero section) and it turns out ruining the beautiful style that I have made.
Please help! thanks in advance.
source code: https://github.com/trantrunghieuvns/netflix1.11/tree/fixbugs
deployed web: https://comfy-zuccutto-c43c67.netlify.app/

When should I use className={`styles["my-class"]`} on my react project?

I'am working with React in a project and we need to use a className={styles["my-class"]} in SCSS, I looked on google to know more about styles, but I didn't found anything.
Can someone help me?
This is the css modules method
You can read about it here
https://github.com/css-modules/css-modules

Auto completion for classes on React Tailwind CSS app not appearing in WebStorm

Pretty simple yet frustrating question. I've started working on an React app using Tailwind CSS but the Tailwind CSS autocompletion/suggestions isn't appearing.
The JetBrains demo shows the wanted result. Tailwind CSS | WebStorm
But, in my WebStorm I can't get the autocompletion and suggestions on classes to appear. Tailwind CSS is functioning fine, it's just the autocompletion that doesn't want to show up.
Since there's no error of any kind I am kinda lost here, so any help into the right direction would be greatly appreciated!
Turned out to be a problem with the current Tailwindcss version..
switching back to npm:#tailwindcss/postcss7-compat#^2.1.4 did the trick.
Hope this helps someone else who's stuck aswell!
Just install the Tailwind CSS IntelliSense extension in vsCode itself. No need to downgrade.

bit-src didn't show the style of react bootstrap

I've made a component (button) with CRA and react-bootstrap,
and I exported it into bit-src,
the component has rendered without its styling,
however I've tried to push it with pure CSS and the component has rendered with its styling,
so is bootstrap didn't fit with bit-src
or I've missed something ?
You need to import all from here. Please read careful documentation.
(disclaimer - I help maintain Bit)
For the playground to fetch the bootstrap design, you need to import it to the example Bit runs. Add an import statement for react-bootstrap in the example itself, and import the design from there.
For anyone stuck in the same situation as I was.
The problem was that when I imported the component with react-bootstrap in the project it was missing the css files required by react-bootstrap to render its styling.
So the solution was to install react-bootstrap and bootstrap.
npm install --save react-bootstrap bootstrap
And add an import for the css file in index.js
import 'bootstrap/dist/css/bootstrap.min.css';
Inshort just following the get stated section of react-bootstrap solved the problem.
And I also think adding css import in the component itself may solve the problem but I have not tested it yet.

Integrate react-fontawesome on nextjs

I use nextjs with JSS to styling my components. I want to be able to add react-fontawesome inside my project but I encoutered a problem to integrate the library functionnality.
I tried differents way to implement it but any of them work. Here a codesandbox with my code - https://codesandbox.io/s/v6pyxp00w0
The preview render of codesandbox seems break but all the code are on here.
When I run my code, this error message is display on client and server consoles:
Could not find icon { prefix: 'fas', iconName: 'facebook' }
Do you think I should call the library function inside my app.js file instead of my document.js? Have you an idea to fix my problem?
Thanks you very much!

Resources