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
Related
Really, I can't find the problem because for the same div some classes are working and some are not.
I tried to find some clues but most users didn't have paths in the tailwind config file.
My code:
fixed is working fine, but bottom-2 and right-4 aren't. Actually, I don't know if w-[405px] is working.
Add mode: 'jit', to your tailwind.config.js in order w-[405px] works. I think other classes is working you just didn't noticed it or maybe conflict on other styles in your div.
You could try vimesh style. It watches all html element class attribute changes and generate tailwind compatible css at runtime. Just add
<script src="https://unpkg.com/#vimesh/style"></script>
at the head of your page.
We use tailwind at work, not something I'm super in love with but if we're adding tailwind classes that haven't been used in the document yet we have to do it locally for the compiler to add the new classes to your document.
Unsure if this is the only way to do it as its fairly new to us, but if you bring your project to a local environment and use the command
npm run watch
it will signal to tailwind to watch your class names and add the new ones to the compiled list. so if your making custom ones using [] its likely that tailwind hasn't addded those instances to the minified version of their css
For real I dont find how to resolve it. But in my case I just added the same classes to component and after it tailwind started to see it. If someone knows why exact its happening Im still waiting for any ideas
I was working on a nextjs project where I was asked to add an external script that dynamically creates nodes using vanilla js (createElement, setAttribute, etc.). I couldn't help but notice that the global css imported at the top of my _app.js did not affect these dynamically created elements at all. I tried importing the css many different ways but couldn't get the nodes to be repainted without modifying the external script and dynamically adding the styling there.
Does anyone know why exactly these nodes aren't repainted by the imported css and how to import them / configure next in a way where they are ?
Thank you !
P.S: script works and is imported in , tried importing css in too without luck
I found a similar question where the answer was an issue with css encapsulation. Here is the link to that answer, it explains it better than I can. Their issue was with angular so it could be the same.
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
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.