I usually define global styles in index.css. What is the best practice to define global style? When should I put it in index.css vs App.css when I work on React app?
For a React app, the best practice is to put every component in its own directory containing its corresponding JS and CSS files. The App component is the topmost component in a React app for wrapping all components. There aren't any predefined rules for using App.css or index.css for global CSS.
Check out this article for React styling best practices: https://medium.com/the-non-traditional-developer/styling-best-practices-using-react-c37b96b8be9c
Relevant question: index.css vs. App.css in default app created by "create-react-app" -- what's the difference?
Related
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 building a website with gatsby and I have set up the gatsby scss plugin. Everything seemed to be working fine until I realized my styles from home.module.scss were also being applied to my navigation component that only imports navbar.module.scss.
I have a style for my buttons in each of these modules that looks like this...
button {
// different styles in the different modules
}
Both of these modules import a global scss file at the top like this...
#import '../styles/global.scss';
The react components only import their respective modules. In my main index component I import global styles like this import './global.scss'
Am I misunderstanding how scss modules work in React or is this is a bug?
from my understanding
In react importing SCSS or CSS in any component will be global.
So it will affect all other components as similar to the component where you imported the SCSS file.
use different class names
We've two options to keep styles in an Angular 9 app; global styles in styles.css or individual component level styles in the component css file.
If looked at the project from performance perspective;
what should be the preferred way?
Should we keep all styles in a single global style.css file or keep each component related styles in their component.css file?
To answer this question we have to refer to the Angular official doc.
By using Using component styles you will have a better modular design.
Angular can bundle component styles with components, enabling a more
modular design than regular stylesheets.
But, if there are some styles that are common between more than one component it's better to have a shared css and e.g. if you use pre-processor such as .SCSS, LESS, SASS, ..., you can have some _var.scss to define general styles such as base color, fonts, ... and then #import in other component styles or just register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
So, using component styles provide scoping restriction and View encapsulation for your app. This scoping restriction is a styling modularity feature:
You can use the CSS class names and selectors that make the most sense
in the context of each component.
Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.
Changes to styles elsewhere in the
application don't affect the component's styles.
You can co-locate the
CSS code of each component with the Typescript and HTML code of the
component, which leads to a neat and tidy project structure.
You can
change or remove component CSS code without searching through the
whole application to find where else the code is used.
There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html or added via angular-cli.json. The angular allow us to add the component specific styles in individual components, which will override the global styles.
I don't think there is much (if any at all) significant difference in performance. The global or component style distinction is all about the scope of those styles and maintainability of your codebase. Generally its good idea to keep everything in components as they are scoped to themselves and will not accidentally override other same styles from anywhere else. And global styles should stay mostly to theming, utility, helpers etc.
Besides you have an option to make component style global as well, if for some reason you need to do that.
step to define/preferable way for global style
Create _base.scss file in the css folder (first create css folder).
import other helping scss file in _base.scss file
add the entry of _base scss file in style.scss file (style.scss available when we create the folder).
Problem
I want to integrate angular material scss, but scope and isolate it to only apply its styles to my application. I need this, because my angular application will be embedded in a big monolith. Therefore, we need to prefix our applications scss and have it scoped as it could style other parts of the application. The problem is, that if somebody uses the same class names like angular material does, the styles will win by specificity and this is uncontrollable and will lead to bugs.
Our Idea
The styles should be isolated/scoped to just be applied to our <my-app></my-app> tag by prefixing all selectors automatically.
Generated styles should look like this:
my-app .mat-button {}
Current Attempt
Our current attempt is to include it where we need it. It looks like the following:
styles.scss
#import "~#angular/material/theming";
my-app {
#include mat-core();
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
}
The Problem with this solution is, that the scoping is applied to some classes, but not to all.
Demo/Showcase
I created a demo on stackblitz as showcase.
You can see the problem in the in the following screenshot:
Is there another option to have angular material styles isolated/scoped?
The styles applied are still within the project.. If you want some app-wide styles that should not be in the top-level styles.scss, put them in app.component.scss and make sure that all other components are children of app.component.ts. Angular scopes (s)css files to its related component by default.
i created two css file in my react app login.css and main.css then require login.css in login.jsx and main.css require for an other files but css writed in login.css affect to an other components. also With a little focus i find all css file loaded in header generally for all component
CSS imported inside a component it's not scoped by its own. If your CSS have a general rule it will influence the whole page.
Importing CSS inside a component is great because you will automatically remove it if you delete the component and, in case your component is loaded asynchronously with a chunk it can be imported later. That's depends on webpack settings.