Im currently working on a Angular2 application with webpack and Im trying to set differents css themes according to the user.
For example : When the user connect, If it's a boy, I want to have my backgrounds blue, and if it's a girl I want the backgrounds to be pink.
Simply changing the css value with setAttribute or style.property wont work because the DOM is destroyed when changing tab in the application, it needs to be kinda permanent.
I've tried using different css stylesheets (1 for each theme) and linking them to my html with javascript when the user connect. Problem is, webpack is always adding automatically my css to my html when building the app.
Thanks for the help.
In your css, make a rule like :
.is-boy{
background: blue;
}
.is-girl{
background: pink;
}
and declare in you angular app a scope var like $scope.userSex = 'boy';
and on your body use ngClass like this
<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ...
:host-context selector
You could use the :host-context selector to apply styles to your component based on the parent component.
styles:[`
:host-context(.parent1) div{
border: 1px solid blue;
}
:host-context(.parent2) div{
border: 1px solid blue;
}
`]
This allows you to conditionally apply styles based on a the selector that wraps the component.
plunker
edit:
So in your case - your parent would have a div with class .boy and a div with class .girl
You could load these containing divs with some flag controlled by ngIf
If you want to be permanent store class value in localStorage. To set the theme use ngClass with variable set to theme you need.
Related
I'm building JavaScript widgets that are supposed to be added onto other people's websites.
I style my widgets by dynamically adding a CSS to the pages they're on.
For example,
My CSS code below applies to a DIV inside my widget:
.myWidget { background-color: red; }
But a CSS file outside my own on a remote page might have:
div { border: 5px solid green; }
The CSS above would also apply to my widgets. How can I disable all other CSS outside my own?
Thanks
You could be Using shadow DOM
Shadow DOM MDN Web Docs
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.
You can use the all shorthand property and the unset keyword to set each property's value to its initial value.
.myWidget {
all:unset;
background-color: red;
}
div {
background-color:yellow;
}
<div class="myWidget">Hello World!</div>
I am using a dropdown from react-bootstrap and its context-menu has a className called Select-menu-outer. I wanted to change the font size of this menu only in one component.
What I did was, I just created a new css file called panel.css and did import './panel.css; in my component.
In the panel.css, I applied the style to the Select-menu-outer like
.Select-menu-outer { font-size: 12px }
This worked fine, but it affected the font size of all other dropdowns in the entire app.
I would have used CSS Modules and do something like import style from './panel.css and do className={style.Select-menu-outer} something like that, but since this is a third-party library component, I wasn't sure if I can do that.
Any good way to make this work?
Add a new class list to the drop down you what to change called .Select-menu-outer-size
Then do this in your css:
.Select-menu-outer-size { font-size: 12px !important}
The !important overrides the other class.
Javascript could be used!
let's say that it is the 3rd dropdown on that page with this class: .Select-menu-outer
So we do:
var addclass = document.getElementsByClassName("Select-menu-outer").[2];
addclass.classList.add("Select-menu-outer-size");
Then add you css:
.Select-menu-outer-size { font-size: 12px !important}
Note: 0 is 1 and 1 is 2 etc. for document.getElementsByClassName("Select-menu-outer").[2];
Linkhttps://www.w3schools.com/jsref/tryit.aspfilename=tryjsref_document_getelementsbyclassname
You can use the bsPrefix prop to customize the class of your component, in order to style it via CSS.
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
Source: React-Bootstrap docs
You can use inline-styles on that specific menu to override the default style.
OR
you can assign an id e.g. id="outer-menu" to that specific menu tag and access that menu with #outer-menu in CSS.
The priority of id is greater than className so it will probably override it.
In this React Component I have Cookbook.js and Cookbook.css. I have a bunch of styles in Cookbook.css and specifically it has
form {
display: inline-block !important;
padding-top: 30px;
margin-left: 100px;
}
Which is fine since I import that into the Cookbook.js. But I created another Component called Survey.js along with Survey.css. In Survey.js I use a form as well but I ONLY import survey.css. Yet for some reason, The CSS from Cookbook.css gets applied to the form in my Survey.js. As a result, my form on Survey.js is in a odd spot. How Can I ensure that the css for each form is independent of each other?
When you create CSS rules, it is often easier to use class names instead of id's. Such as:
.class {
background-color: blue;
}
When you have common elements across multiple components, the CSS color will apply the styling to all elements such as:
p {
background-color: blue;
}
If you want to differentiate the styling where it applies in one component but does not apply to another which I think you are trying to do in your case, you need to use id's instead of element or class names.
Add an id to the component that you want to style and create a rule for that element such as:
#hero {
background-color: bluel;
}
This should be able to ensure that CSS is different from each other.
I think that you are looking for CSS modules. CSS modules are CSS files that only apply to a single component. Here is an example: https://css-tricks.com/css-modules-part-1-need/. More about CSS modules can also be found on Google and other forums.
Thank you,
Caiden Sanders.
In React when a component is mounted, its specific CSS file is also imported. You should know that React makes only a single HTML page application. In one HTML page if you import multiple CSS files and if they have conflicting CSS, then CSS will be applied on the basis of priority.
CSS that comes last overrides existing if common elements conflicting unless you haven't used !important with any property.
So, you should use unique ids or classes to prevent conflicts wherever required, and use common CSS if you have similar behaviour for certain elements.
Recently I'm using an image slider to my angular project then I need to add the background colour to each images' border like my attachment. I used custom CSS class to fulfil this but I cannot find way to apply this class correctly. But when I using DOM I can do that, My CSS class is as follows
border-boundry{
border-style: solid;
border-color: red;
}
NPM Package Link: https://www.npmjs.com/package/ng-image-slider
Demo: https://sanjayv.github.io/ng-image-slider/
What if you use one of the classes you have on the right like ng-image-slider-container ?
Try to add "background-color: red;" on the class ".ng-image-slider", is this what you want to do ?
It is very possible that the library you're using is enforcing css rules with !important flag. So you can either try to override it with !important yourself (not recommended ), or try to use already existing classes by adding more css to them...
Add the following lines in the styles.css of your angular app. With this you get the selected image surrounded with a frame.
.selected-image {
border: 1px solid lightgrey;
}
I want to have a dark and a light theme on my Vue app.
I can create dark.scss file and change classes styles and use !important property to override styles defined in components.
Or I can use props in my components and change className with v-if based on the theme.
e.g. set class to className__light when theme is light otherwise set to className__dark.
which one is better in all situations like performance or time needed to do it?
Well i would not do it with classes. I would create CSS variables with either SCSS or you create CSS variables in :root
If you do it with the :root method then it should look something like this:
:root {
--background: red;
}
Then you can access it in any component like this for example:
.class {
background: var(--background); // the background will appear red
}
Now you can change the background color with just 1 CSS variables.
To change the variable with Javascript you just write following:
root.style.setProperty('--background', "green");
The problem here is that it isnt supported in IE if you care about browser support.
So you should create an fallback like this:
.class {
background: red; //fallback
background: var(--background); // the background will appear red
}