Is it possible to use animations and media query in react without css only using javascript or jsx?
Sure but you have to properly configure your bundler or else everything has to be inline css.
Related
I have a next.js project. For styling I am using tailwind, scss modules and postcss. I have no overridden webpack configurations.
In development mode next.js injects styles in tags as expected, but in production it injects similar styles as *.css chunks and tag at the same time.
Next.js style duplication
Do you use Next.js' experimental optimizeCss with Tailwind or other CSS frameworks? It might be duplicating style as it injects inline CSS.
I am going to build an app in react and was thinking to use material-ui and tailwind css.So my question is does using both of them in same project make any conflict. I need strong suggestion .
you can use that but you have everything in materialui or in tailwind so for my case I will use MaterialUI for whole app and styled components
I think that if you combine both with twin.macro its great combindation of tailwind and styled-components. And i think its the best way how to use Tailwind with material-ui
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
In a React app, we usually import CSS files into the JavaScript components.
I thought this way we inject the CSS into the final JavaScript build.
However, it seems that React (at least create-react-app) still generates separate CSS files.
Why is that?
Is there any way to force CSS stylings to be part of the final r? Kind of CSS-In-JS?
You should eject the create-react-app and change webpack config file (style-loader similar question) to not create separate file for css bundle or use html-inline-css-webpack-plugin.
I am using nextjs for a site and have my css in
Styles components. I want to import modernizr and use this to detect browser features and change the css in my styles components accordingly. I can see I could just use a script tag in the html file but wanted to see if any way modernizr can be used as import. What’s the best way to use modernizr in react?