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.
Related
I have a React App with the following folder structure.
All my "pages" have their own Folder with a .jsx file and a .css to style the page.
I imported the CSS in the HomePage.jsx like:
import '../HomePage/HomePageStyles.css'; //HomePage.jsx
So far, everything is working just fine. Then I created the ChampionDetailPage.css and imported it in the ChampionDetailpage.jsx like that.
import '../ChampionDetailPage/ChampionDetailPageStyles.css'; //ChampionDetailPage.jsx
Now things start to get funny. The HomePages.jsx suddenly start to use styles from ChampionDetailpage.css that have the same class names without any obvious reason.
The goes vice versa, so the ChampionDetailPage.jsx uses classes from the HomePageStyles.css as well.
For example, I have the class .content-right in both .css files
.content-right{ /* HomePage.css */
width: 55%;
}
.content-right{ /* ChampionDetailStyles.css */
display: flex;
padding-right: 20px;
flex-grow: 100;
flex-direction: column;
}
In this case, React somehow styles my Homepage.jsx with the ChampionDetailPages.css which is also visible in the Chrome dev tools.
Why does that happen and how do I fix it?
Things I tried already:
Changing the import eg. import './ChampionDetailPageStyles.css';
Throwing the CSS into its own directory
in both cases, the problem remains the same!
Thanks for your help in advance.
You can't have stylesheets with classes that overlap eachothers.
Then, the class that is taken in consideration is the one that was in the css that was loaded the last. This is why you have each of the two classes that are picked up randomly.
What you must know When you import a css this way:
Its content is not scoped for your file that imports this css.
It will be imported globally, and then, classes that are defined inside will be shared to every dom content of your aplication during its whole lifecycle.
You have no control on the order of importation of your css over the time.
To summarize, the stylesheet is not actually picked up randomly, it is the one that happens to be loaded the last that overrides every class that was already defined in the previously loaded css.
Something to know, all the css that you import in your client application are ALL loaded at the bootstrap.
A better way to manage styles with React is to use Emotion. A framework that permits to handle css with your program, and also to be able to scope your styles to your component, or to share it with several components.
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
Problem:
I have an angular app with a lot of components and sub components. These were generated by running ng generate component <component-name> so each one has the same style of component tag:
#Component({
selector: 'app-<component-name>',
templateUrl: './<component-name>.component.html',
styleUrls: ['./<component-name>.component.css']
})
My understanding is that all CSS related to this component should be placed in src/<component-name>/<component-name>.component.css and should be automatically applied to the component when it is rendered.
This does not seem to be the case however, as when I put certain instructions in that CSS file they are seemingly ignored. The ones that are the most notable offenders so far are things like text-align and any kind of color tag, while tags like font-family or vw/vh work just fine.
On the other hand, when I put my CSS in a file like src/styles.css and place an import in index.html for this file, any CSS I have there applies correctly but applies itself to ALL components. This wouldn't be a problem except some components necessarily share naming conventions, and I have no way to specify that I don't mean [col-id="car"] in table2.component.ts but rather [col-id="car"] in table5.component.ts.
EDIT:
Here is an example of what I'm talking about:
My current grid looks like this:
All cells in a given column share the value of the col-id tag:
My slab-grid.component.css file contains sizing instructions for the grid itself, and a font specifier:
.slab-grid {
width: 45vw;
height: 80vh;
font-family: monospace;
}
I know these apply properly because if I remove the size definition, the grid becomes 1px by 1px, and if I remove the font-family, the whole grid turns back to the normal font as seen below. Column "Thk" does not change back because another grid in another part of the app has the same col-id and the overarching styles.css file contains a definition for [col-id="thk"]:
So in my understanding if I were to add the following statement to slab-grid.component.css
[col-id="yard_seq"] {
text-align: right;
}
I expect I would see column Yard Seq which has col-id="yard_seq" become right aligned. In reality when I add this statement to slab-grid.component.css, nothing changes. If I however go to the primary css file for the project located in src/styles.css and add the same statement, I get the below result:
Question:
Why does my CSS not always apply to the relevant component if placed in src/<component-name>/<component-name>.component.css?
OR
Is there a way to make the elements of src/styles.css only apply to the page when certain components are rendered?
Solution:
I've found an acceptable solution to this issue. If I modify my own /src styles selectors from [col-id="thk"] to use the descendant selector .slab-grid [col-id="thk"], then I can make my styles override the conflicting ones with a !important without editing the conflicting files.
Every component has hes on styles if you want to share the same styles between multiple components you must create a shared CSS file and then import the file on the styles.css or much better solution add the shared CSS files on the angular.json config files.
the styles from the parent component do not apply to the child components.
only and only if you add the same styles on the styles.css or include the file on the angular.json
example
"styles": [
"src/styles.scss",
"src/scss/theme.d.scss",
"src/scss/global-scrollbar.d.scss",
"src/scss/acrylic.scss",
"src/scss/buttons.scss",
],
"scripts": [
"./node_modules/moment/min/moment.min.js"
]
I was from angularjs, now picking up react. Even I was using angular 1.x which is already component based, but it still has template. But in react the file structure and the way we use to code front end has changed, like instead of spiting files by pages, u make files by component now. It promotes reusability but does that means how we apply the css also changed?
I saw this import { navBar } from 'styles/navbar.css' in navBar.jsx. Hmm how does css work together with JSX? doest navBar css load that file? What webpack plugin is needed for that? does it come from default? I'm using react-create-app by facebook so I didn't know much about config.
You use css-loader and style-loader to include CSS files in your webpack bundle. By default it generates some JavaScript code that creates a style element with the contents of the imported CSS file and appends it to the head element in your index.html.
So you can definitely use external CSS files to style your React components, just make sure that every CSS class is properly namespaced to avoid naming conflicts with the classes of other components.
For example you could adopt the BEM naming scheme. If your component is called NavBar, then the root element of that component might have a className of x-nav-bar (the x prefix is there to avoid clashing with frameworks like bootstrap), and all child elements, if they need to be styled, will then have class names like x-nav-bar__${childName}.
This kind of import { navBar } from 'styles/navbar.css' is not relevant to JSX but to css-loader. This is a webpack loader that handles css, and it supports cssModules, that allows you to encapsulate selector names in order to avoid css leaks.
So, shortly, that import exposes an object with mapping between your selector to unique string (usually an a hash).
For example:
// styles.css
.foo {
color: red;
}
.bar {
color: green;
}
// Component.jsx
import styles from './styles.css';
console.log(styles);
/* This will print something like
{
foo: '_h234jh',
bar: '_234m23'
}
*/