I have a React app that can be included in a page.
My problem is that I don't want to have conflicts between the page's CSS and my React app's CSS.
To prevent my CSS from spilling to the page content, I can simply use a namespace on all my CSS classes, such as "react_app".
But how to prevent external CSS from being used by my react app ? For example the page defines :
body {
font-size: 1em;
line-height: 1.8;
}
How can I make sure that my react components will not pick it up ?
A solution would be to define "line-height" for all my classes to override this definition, but I don't want to do that because it is not possible to cover all properties and it would take space.
Thanks for your help !
Try to use these reset classes inside your component
https://meyerweb.com/eric/tools/css/reset/
Did you try to use CSS-modules ?
https://github.com/gajus/react-css-modules
It might help with your problem.
Related
I have a Parent.js component with a child component Child.js inside of it.
Parent.js imports parents.css
Child.js imports child.css
If I define this in child.css:
.example {
font-family: 'Roboto', sans-serif;
}
How come I'm able to use this className in the Parent.js component as well despite not specifying it in the parent.css?
Unless you use unique class names, CSS Modules or some other alternatives available for scoping CSS styles to any component in React, styles specified in any CSS file will be applied globally.
If you want to limit styles to any component, use CSS Modules or make sure every class name is unique in your project.
For details on how to use CSS Modules, see Adding a CSS Modules Stylesheet. You can also look at 9 Ways To Implement CSS in React JS for other available alternatives.
I recommend using unique class names. For example, lets say you have multiple ListView components: MemberUsersListView, AdminUsersListView, TestUsersListView; and each of them needs to be styled differently. I would create the following CSS classes:
.MUListView{
...
}
.AUListView{
...
}
.TUListView{
...
}
I know this seem's annoying, but it's cleaner than applying inline styles and easier to implement on smaller projects.
I am using PrimeNG for my project I used p-dropdown with appendTo body only for particular components files, and I changed the css in only one file as follow, for example
geneFinder.component.scss
.ui-dropdown-panel {
z-index: 999 !important;
}
and component file is
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body"></p-dropdown>
But this css is affecting in all other files also. If I removed the !important it is not affecting in other pages and this is not working with particular component itself. How to fix this issue.?
you can try this
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" [style]={'z-index':'999 !important'}></p-dropdown>
You can also customize the z-index with the p-dropdown attribute baseZIndex. This way, you don't need to set it in css, and it affects only the dropdown where the attribute is set.
Angular is a single page application framework hence all the CSS would be combined and CSS styles will be created inside style tag of the single html page. If we are having a CSS class with name that is common to other component's elements it does affects it.
In case of component specific CSS, create a custom class name something like,
.mycomponent-ui-dropdown-panel {
z-index: 999 !important;
}
and add the class to the element of the component's html where we need this change to be applied. This will make sure that other elements of other components are not affected by the CSS style.
I fixed the issue by adding the panelStyleClass in my component,
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" panelStyleClass="overlay-zindex"></p-dropdown>
.overlay-zindex{
z-index: 999 !important;
}
Angular4
Hi All. I'm have a single page within a large Angular4 app that needs to have body css that's different to the rest of the app.
I don't want to set ViewEncapsulation.None because it's just the one component that needs to be affected.
Can I use :host(), :host-context() or ::ng-deep in some way to select the body and apply the css rules? If so then how please? If not, is there another way to achieve this?
Thanks!
Thank you both very much. #Palpatine1991, you asked why I would want to access the <body> DOM element. This is because I have one page in the app which is a full screen game that is played on mobile devices and has drag and drop functionality within it. On iOS the "bounce" effect present in Safari makes drag and drop a very poor experience. So I wanted to add the following css to the body and html DOM elements of that single page, which suppresses that bounce effect.:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
I had a look into the solutions you gave (thank you!) and went with the following solution:
ngOnInit() {
this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
}
ngOnDestroy() {
this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
}
This seems to work.
Thank you :)
Why do you need to add your CSS to <body> if it affects only one component?
Using :host() it will apply the styles to the element which is selected by component's selector.
Using ::ng-deep you can select only elements which are somewhere under the host element (but <body> is not under your host!)
The only way how to change the styles of the body from the component which has ViewEncapsulation.Emulated is using the Renderer2 API but it seems to me like a very bad practice
If you need to override some global <body> styling of your component, you can do it using :host-context. Example here: https://stackblitz.com/edit/angular-material2-issue-oodjmm
I have a web app using angular 2 and angular materials. I am using a simple modal:
<h1 md-dialog-title *ngIf="data">{{data.title}}</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions></div>
But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:
Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.
Have you tried opening your dialog with specific height that you need? like:
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
Another way to force custom styles is to customize the theme itself. you can have a look at the guide here.
You can override material styling from your scss/css.
But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:
/deep/ .mat-tab-group.mat-primary .mat-ink-bar{
background-color: red;
}
I have a Flex application with a main class that is a WindowedApplication. The CSS file is loaded using the <fx:Style source="defaults.css"> tag in the MXML.
However, when this main class will open a NativeWindow, the CSS does not get applied. I have a subclass of NativeWindow where I can add some things, but this is ActionScript, not MXML. Is there an equivalent of <fx:Style/> for AS? Or do I have to do things in a different way?
UPDATE:
None of the proposed solutions so far seem to be working. I will try to write a small test app to show the behaviour, maybe it is a bug in the Flex framework.
I think you'll need to load the styles via a compiled stylesheet (as a SWF). You can compile a stylesheet to a SWF with MXMLC (mxmlc stylesheet.css). Then use StyleManager.loadStyleDeclarations(swf) to load and apply the styles.
You might have to do all styling with
someComponent.setStyle("someProperty", "someValue");
There's also a [StyleSheet](You can use StyleSheets parseCSS method class that you could use but it only applies to TextField elements IIRC
Have you tried using global selectors in your CSS?
like
global {
color: #000000;
}
or
s|Button
{
color: #FFFFFF;
skinClass:ClassReference("com.what.skins.ButtonSkin");
}
I have these things in my main application file in a style block and they are applied to all views