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.
Related
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?
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.
I am creating a multi-page application using ReactJS and I want different styles for different pages, especially the logo position.
This is my App.js file
import React from 'react';
import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';
const App=()=>{
//ROUTING
}
export default App;
The last imported file always overwrites the styling properties of the entire app. I need to change the position of the logo in each page accordingly and also other things. How do I add different css properties for each page?
You can use or module css (for this you have to do changes in webpack).
https://programmingwithmosh.com/react/css-modules-react/
Also you can use package styled components https://www.styled-components.com/
In this case, you have unique styles for all components.
Create a folder structure as below. And import their own css files. If you are using sass use unique class names. For the 3rd party components, you may need using "!important" in the css files.
common/
Avatar.js
Avatar.css
feed/
index.js
Feed.js
Feed.css
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
and you can read this : https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
I know this is a very bad approach when we try to add two different css frameworks in a single project. But for now, due to a project requirement, I need to add bootstrap and materialize css in a project. In root component bootstrap is used, and in child component I will use materialize.
In child component I have included materialize in the following way
import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import screenFull from 'screenfull';
import material from 'materialize-css/dist/css/materialize.css';
import './Control.css';
but adding this way overlaps bootstrap classes which is obviously not the required behaviour.
I want to limit scope of materialize.css inside the child component only. Can anyone give me a suggestion on this?
Note: Root component was developed before, and create-react-app is not used over there. webpack configuration file has been written manually.
Please use https://fezvrasta.github.io/bootstrap-material-design/ for your project as it's based on the bootstrap the UI will have look and feel like material and you haven't to change the existing code. I recommended to use only one UI framework for you project.
As I have seen that you are facing a problem where you need to include both the css framework, I better suggest you to use https://mdbootstrap.com/.
The second thing which I suggest you is to include in your application not for specific component. If you want to make some change for specific component look and feel create separate css/scss file and include it to you component.
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';