I am using primeng components, but also have my own theme files that override their styles. So, is there a way to delete component css styles from the final bundle to reduce bundle size?
Related
In react I have found either inline CSS styling OR separate CSS style sheets and CSS modules etc to import into the component . Is there no way in react of creating an internal tag ie internal styles specific to the component, say on top of the component like we do in HTML
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 using scss in react.
I have two components that have <img className='logo' />
and both components have independent .scss files.
I want to customize the styles of two .logo (s) differently.
What should I do to make classnames unique when rendered?
you can use css-modules
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
React support is native, you can check-in documentation
just use different classnames for styling ex:homepage-logo , article-logo
I'm working on a project where I want to use scss with react.
The Problem
I'm using 3 global style files, and 1 separate scss file for each component, but they seem to apply styles that I didn't even import.
File structure
This is my doubt. Your Sass files are converted to CSS file and in react if you use CSS files imported as import './somecss.css', your styles will leak out to other components. That's why they introduced CSS modules. If you are using CSS modules, there is a difference how you apply it. It's not like how a regular CSS class/id is applied.
CSS Modules let you use the same CSS class name in different files
without worrying about naming clashes.
You can get more info from docs
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.