I'd like to use this calendar package in my react project: https://www.npmjs.com/package/#zach.codes/react-calendar.
It comes with a css import, without it, the app effectively doesn't work. If I import the suggested css file import "#zach.codes/react-calendar/dist/calendar-tailwind.css" the calendar package works well but it messes with the rest of my app's styling. If I import the "no-reset" version import "#zach.codes/react-calendar/dist/calendar-tailwind-no-reset.css", the rest of my app looks fine but it does make the calendar look funky, it mostly looks like it works but I'd have to add my own css to make up for some styling that's lost.
That said, it would be ideal if I didn't have to add any css. Is there a way to import a css file and have the css be isolated to just the react component that is in the same file?
Related
I'm using Quasar in my VueJs project. When I use the quasar its sass or CSS files override my current design. So I just wanted to import only styles for those features that I use for example if I'm using a button in quasar so I should import the styles related to buttons only. I know this can be achieved with tree shaking but I don't know how to use that.
I used Quasar button in my main file
<q-btn flat style="color: #FF0080" label="Submit" />
And to get the desired result i need to use one of these in app.js file
import 'quasar/src/css/index.sass'
or
import 'quasar/dist/quasar.css'
But when i do so it overrides other styles as well in my project.
This is a very specific question, but I am using the Chakra UI component library for React and I want to import my own custom css files, although it doesn't allow me to do this.
I don't know if this is a bug or if it is intended, but is there any way I can go around it?
Thanks.
Make sure that you import css files in right place. Try to import your css files into App.js or if be more specific into the file where you init ChakraProvider. This approach works fine for my project:
import { ChakraProvider } from '#chakra-ui/react';
import './yourCssFile.css';
You can extend or override a token in the default theme by importing the extendTheme function. You can override properties as well as add new ones.
But if you want to add an external CSS file, I've found out from reading the docs that in order to import other file types (.css, .woff or .svg) in your theme file, you'll need to move those imports out of the theme file.
Concerning page loading speed, It seems strange to me that React is importing CSS files that are imported in components that are not even being used on the homepage. My react app seems to be importing every css file in my entire project, i'm sure this is affecting my page speed. How can i prevent react from importing css files (which are being imported by components) that are not even being imported/exist on a certain page?
For example my homepage may have Comp1.js, comp2.js and comp3.js and each of these files import their own css files. But i see css files from other pages being loaded in the html head tag...(see screenshot below)
const comp1 = await import('path');
I was having a similar issue, which led me to discover this question. Here's what worked for me:
Instead of importing the CSS files at the head of the component's source, you can import the file using import(<path>); in the render() function in case of class-based components, or before the return() statement in case of stateless functional components.
That way React won't be able to load the files at app's startup because their imports have been abstracted away by not being there in the top level structure of any component.
I'm just beginning to learn React so if anyone has a clearer explanation of how this works, I'll be more than happy to know.
I have an app created using react-create-app tool and I use a style.less file in src/assets/less that is compiled automatically.
In my style.less I import the style I have in the various react components in my app. I like the idea to have every component with his own style.less in there.
The first problem is the reference I have to add or update in the src/assets/less/style.less, every time I add a component or I rename it or I move it. Is there any way I can get all the import automatically?
If your webpack.config.js is configured correctly, you should be able to import each components styles like:
import './style.less';
I'm using the vuetify webpack boilerplate (https://github.com/vuetifyjs/webpack) and I can't get the aliases in /build/webpack.base.conf.js to work for importing css (like import "~assets/css/mycss.css") even though it's working like a charm for js import (like import MyComponent from "components/MyComponent").
I tried several potential solutions I found, none seem to work...
Is this even possible?
Try to remove .css at the end.
Change
import "~assets/css/mycss.css"
to
import "~assets/css/mycss"
For more details, check this: https://github.com/webpack-contrib/sass-loader#imports