I have designed a web page in ReactJS using CSS. For one of the component I have used Bootstrap for styling. I garbed the latest bootstrap cdn link and pasted it in "index.html" file. When I use that bootstrap link, it overrides few of my custom styles. Each component of my project has a separate CSS and JS file. Please suggest any solution, where should I put that bootstrap link in my project so that it doesn't override my custom css styles. Thanks.
It's smell like wrong css include order. You may check it in browser. To resolve this, you can go through few ways:
Try to include bootstrap css as very first link in head section (after meta).
Try to include your css via import in your index.js file.
Second way should be look like this:
import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css";
import "./styles.css";
It’s very simple. Link your custom CSS file just below the bootstrap.css and override the class in your custom.css file.
You can rely on descendant selectors, ID and ‘!important’ notation together to override the styles but that is against the CSS best practices. You can use them only when it is absolutely necessary.
You can simply use this method. Follow the following articles. I hope you help this.
Override Bootstrap CSS styles
CSS Overrides
Related
I'm new to React. So I found out that there is a CSS mixing problem going on in my React code. So I used CSS modules to solve that problem. But when I'm doing a frontend React JS project with Bootsrap, I came up with this problem.
So In this Carousel component, there are hidden(those are only shown in compiled HTML files) CSS classes called carousel-control-next and carousel-control-prev. So I need to change their CSS styles with CSS modules. So how can I access them?
I imported this CSS module file as a CSS module in my React file, but it's not working. Can someone help me with this problem? Thanks in advance.
You have to use :global to get not modular styles such as styles for Carousel
https://github.com/css-modules/css-modules#exceptions
I use npm I bootstrap in reactjs project , but I want to modify some of the elements, so I wrote my own custom.css. However it doesn't make any changes (only when I put !important, but the file is so large so it's not a good option).
import these in index.js
import "bootstrap/dist/js/bootstrap.bundle.min";
import "bootstrap/dist/css/bootstrap.css"
and in a single component, I have use bootstrap classes but It affects my all components and also inline custom CSS Style
There is a section in create-react-app about adding a css reset.
From what I understand, CRA includes PostCSS Normalize as a dependency, and all you need to do is create a css file and add #import-normalize; to it, and you will have normalize.css. (By the way, my editor gives me "Unknown CSS at-rule" with this #import-normalize).
What I want is a reset that includes having the margin on body be zero. I can't even tell if the reset is being applied just by looking at my app. I just want to make sure: this setting is not actually included in the normalize.css that is included by following the instructions?
Also, where can I find an explanation of what #import-normalize means? I haven't seen this syntax before.
Finally, is there a way through CRA to use a different reset file, or should I just install another one and import it as usually done?
Here is a bit of background on normalize.css
http://nicolasgallagher.com/about-normalize-css/
With CRA you can normalize/reset CSS with any method you like. You just need to create a stylesheet with the reset/normalized CSS rules in it and import it into App. i.e import './myCustomReset.css
or you can also add the reset CSS file to the public folder, and add it as a link tag to your index.html. i.e <link rel="stylesheet" href="./customResetStyles.css">
I tend to use https://gist.github.com/DavidWells/18e73022e723037a50d6 whenever I need to reset styles instead of just normalizing.
I decided to convert a landing page to an AngularJS website, because I needed to add an admin section. To separate the website section from the admin section, I created two modules: website and admin.
The original website has been made with Bootstrap 3, and has a style.css that is custom CSS for all the Bootstrap and the website in general.
On the Angular version, I can load the website properly after I installed Bootstrap 3, and in the root-level style.css I do the following :
#import './app/website/assets/css/style.css';
The issue is that I don't want this CSS to be loaded for the full website (website + admin). With this configuration, the admin section is also affected by the CSS.
The import only works if it is in style.css. If I move the import to the website module in the root component.css styles won't load at all.
I know it must have something to do something with style scoping and ng-deep.
EDIT: The only way I can have the website load properly with the CSS imports within its own module is :
encapsulation: ViewEncapsulation.None
As of right now, there is no way to import css at the module level. Global styles are applied globally, and the default ViewEncapsulation makes it so that component specific styles don't bleed out to the rest of the app.
If I move the import to the website module in the root component.css
styles won't load at all.
Importing that css at the modules root component only applies the styles to that one component. I also wouldnt look too hard at ng-deep as it is / will be deprecated https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Without knowing how many components are in WebsiteModule or what styles.css looks like, I'll present two options.
1) Rename styles.css (could get confusing since it's not going to be global anymore), import it in each of the components in WebsiteModule.
If that turns out to be too tedious (one bazillion components in WebsiteModule), then
2) I would take a good hard look at the styles.css in question, and see what styles should be applied globally.
Turning off ViewEncapsulation should be a last resort IMO.
I am using react-table to create a filterable table, however I wanted to style it the way I want. Should I change it directly inside node_modules application or should I create my own CSS file and override inspecting the element on the fly?
For React-Table v6, you can basically do it in 2 ways if you want to use css files.
Start with the css file from the npm package and override pieces you want to change
Start with your own css file and style everything that needs to be styled
Ad 1:
import "react-table/react-table.css"
import "./your_own_styles.(s)css"
Ad 2:
import "./your_own_styles.(s)css"
To get an idea what you can use in your own css file you can have a look at this gist: https://gist.github.com/sghall/380aa1055bcad4db22d1fc258d7f09d0
Or start by copying the react-table/react-table.css from the react-table npm package (in your node_modules).
Definitely do not change the node_modules. You can either style inline or attach styles.
https://reactjs.org/docs/faq-styling.html
Definitely override the CSS classes with your own file. That's common practice for styling components from libraries.