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.
Related
which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js
TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown
If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.
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 am creating an application, created multiple CSS files but those are not able to import.
I tried by installing css-loader and style-loader. But it doesn't help
Please look below picture, I have Burger.css file. but it not visible to import
VS Code by default doesn't autocomplete all file types. If you write import ./Burger/Burger.css or import ./Burger/BurgerIngredient/BurgerIngredient.css in your Layout.js file, your css files will be loaded fine.
If you want to use autocomplete for all files in VS Code, you can use this extension.
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
Without Extension
With Extension
Ok since you confirmed that your ./Layout.css import does not work, you should not name your import when it's about a css file. Doing :
import './myFile.css';
is enough to apply your css.
Note that css is global in React, so you might want to use styled component or encapsulate your css to prevent side effect on other components).
Now, if you really want to add style the way you tried to, there is the style attribute which accepts an object. So you could do:
<div style={{backgroundColor: 'red'}}>Hello World !</div>
Note that the css properties are written in camelCase.
Your file structure appears to me to be...
-Burger
--BurgerIngredient
----Burger.css
--Layout
----Layout.css
Your primary application, from what it appears here, is in /Burger. Considering that, when you type import, you see the dropdown appear, showing helpful suggestions, and it lists...
-../Burger/BurgerIngredient/...
As a possible, valid location. In that case, why don't we try importing css, by typing out...
import burgercss from '../Burger/BurgerIngredient/Burger.css';
Note, for instance, Burger.css wouldn't show up until you select BurgerIngredient, because that's its conntaining folder.
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 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.