Angular: override scss styles of nested component - javascript

I created a spinner component. I wanted it to be self-contained and not rely on external css, so in the component I include the scss to style it. The component template is a div with a class of sbl-circ. I can add this anywhere in my app and it works as designed.
Now, I created a second component (a button). I want to add the spinner component to this button. It works, but the spinner color is not correct for when it's inside the button.
So, I am trying to re-color the spinner with the scss for the button component. So far the only way it works is if I do
:host ::ng-deep {
button.btn.btn-primary {
.sbl-circ {
color: white;
}
}
}
I know that ::ng-deep is deprecated. What's the correct way for the button component to re-color any spinner components inserted inside of it?

Try using :host-context.
You should be able to use it like:
:host-context(button.btn.btn-primary) .sbl-circ {
color: white;
}

Excuse my unfamiliarity with angular. But if I were to attempt the resulting css to not be over-written by another style, I would try to use !important as a property value in the scss.
Example:
p {
color: red !important;
}

Related

How to I apply a custom style for a third-party component in a single React component without affecting its style in other components?

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.

How to Prevent Css applying to other Files?

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.

Apply CSS theme based on react state

I have a REACT application (bootstrapped with create react app and react-bootstrap) for which I am trying to add option to switch to DARK theme if user enabled this in his settings. I am storing the settings on server and fetching them into properties.
I have a separate stylesheet called dark.css where all my component styles are overriden.
dark.css (example):
#root {
background-color: var(--dark);
color: var(--light)
}
.card {
background-color: var(--dark); // overriding bootstrap styles here
}
I am trying to apply it at the root of my application like this:
componentWillReceiveProps() {
if (this.props.profile && this.props.profile.theme === 'dark') {
require('./styles/dark.css');
}
}
It works great when running the application locally with yarn start. But when I actually build the app using webpack, it works really strange. Part of the new styles are applied and part on, regardless of which theme is selected. For example background is applied from the main theme and ignored in the dark theme but text color is the opposite.
Why is this happening?
It seems that the dark stylesheet is not being applied at all when building the app with webpack, although everything looks correctly when running it with yarn start.
I guess that you have a naming clashes, which overrides your css.
React supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention.
CSS Modules let you use the same CSS class name in different files without worrying about naming clashes
I solved my issues simply by importing all styled css sheets and then prefixing them like this:
.dark .card {
color: black;
}
.light .card {
color: white;
}
I assign class to the wrapper based on my props:
<div id="root" className={theme}>
// content
</div>
Works like a charm.

How to change color :hover of ant-menu-submenu-arrow in AntD menu component for Vue.js?

I'm using Ant Design (antd) components library for Vue.js.
The menu component is quite simple to use:
https://vue.ant.design/components/menu/
I just want to change the ":hover" color of links (from default blue to red), which is possible by overriding CSS classes.
But is very difficult to me (avoid using ugly workarounds) to change also the color of the "submenu arrow", which remains blue.
Here is a simple example:
https://codesandbox.io/embed/vue-antd-sub-menu-arrow-color-34vlx
Anybody has already tried?
Try with
.ant-menu-submenu-title:hover {
.ant-menu-submenu-arrow::before, .ant-menu-submenu-arrow::after {
background: red!important;
}
}
But use lang="scss" on your style tag so you can compile scss or just fix my script with css syntax.
Try this within the style tag:
.ant-menu-submenu-arrow {
::before {
background: red
}
}

Change CSS theme in Angular

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.

Categories