Currently I'am using antd for it's components, to use them properly I need to import antd css.
When I add this line of code #import '~antd/dist/antd.css'; to my css file to make the antd's components work, it messes up my entire application css.
Is there anyway to fix this? Or Am I importing antd css incorrectly?
Related
I have been trying to render my css codes as internal css inside react component in shadow dom boundry.
I have one css file and scss file. I like to render my css inside the app.tsx file as inline css.
<style>
// css code here
</style>
From past two days I have tryed different different solution but it doesn't work. I have tryed styled-component package using createGlobalStyle but it's not working. Please help me this is the github repo https://github.com/rejoan121615/Digital_Assistant_Client.git
I am trying to render my css code as internal css.
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
I am trying to use more flexbox and css grids so I am not seeing the full use of stuff like materialize css and bootstrap. However I do like the designs of their stuff like(card panels from materialize) but I don't want really want to import all their stuff stuff(css, js) just for a few styles.
So I am wondering if there is just a style that has like the css code for making buttons, card panels and etc that I could just copy into my own css files.
I know I can just go with the inspector and grab the styles from bootstrap and materialize but alot of times styles are getting overwritten and multiple classes are being applied.
I see three options for you:
Easy and obvious: Include just CSS files, not JS, to achieve the same styles.
Dirty and tedious: Copy out styles manually into your code.
Right and educating: Utilise some CSS metalanguage like SCSS. Then if you get e.g. Bootstrap with package manager like npm i -D bootstrap you can import e.g. button styles with:
#import 'node_modules/bootstrap/scss/variables';
#import 'node_modules/bootstrap/scss/buttons';
or materialize-css:
#import 'node_modules/materialize-css/sass/components/variables';
#import 'node_modules/materialize-css/sass/components/buttons';
I have a project that I am trying integrate with the twitter bootstrap. I added the bootstrap-responsive.scss and use #import to add it. When I look at the compiled CSS file it shows the entire file but when I go to the HTML and add a class from the bootstrap like .span8 or something the element will not inherit those classes. They do not show when I inspect the element in chrome. Am I doing something wrong here? I figured I had acces to any classes that are in the bootstrap file when I imported it?
You need to add bootstrap and bootstrap-responsive. bootstrap-responsive on its own won't work.