I'm trying to style two different Dropdown components from ant.design.
For one Dropdown component, I usually create a css file, find the specific className, edit the component using css, and then import the css file. Whenever I do this though, all of the Dropdown components I use throughout the webapp get modified with the same css file even if I don't import the css file into the specific file.
In this case, I want to style two Dropdown components differently. How can I do this?
Any help is appreciated; thanks in advance :)
i usually just use styled-components and then wrap the component. I use react front end tho.
import styled from 'styled-components';
<LoginForm onSubmit={this.handleSubmit}>
</LoginForm>
const LoginForm = styled(Form)`
max-width: 300px;
align-self: start;
justify-self: center;
`;
Related
I am working on a project where I need to update the external CSS files for a webpage.
The problem is that I need to use a Marketo token to dictate what the new CSS style will be. Tokens do not work in external CSS files; I've tried.
I've been able to do most of this work myself, however, I am stuck at one element: a slider. I want to modify the color of the slider buttons to be determined by the Marketo tokens. I have tried "rebuilding" the slider section in the webpage html code, but so far no luck.
Any ideas?
This is a time-sensitive project, too.
Your help is greatly appreciated!
I understand you are trying to override previous css codes. Have you tried the following?
background-color: red !important;
Putting the link of the css file you want to be valid at the bottom.
deleting all the classes of the button related to javascript and adding new classes to style them.
.color{
color: red;
color: blue !important;
}
<div class="color">Color</div>
document.querySelector('.js-a').classList.add('js-b');
document.querySelector('.js-a').classList.remove('js-a');
.js-b{
color:blue;
}
.js-a{
color:red;
}
<div class="js-a">Javascript</div>
Hello for some reason my custom CSS is being overwritten, I have correctly placed my custom CSS below the CDN bootstrap reference but that does not seem to solve the issue. For example if I am trying to change the font color for a header with an h1 inside. When using classes or id's the font color will not change. Though if I target the header by writing whats below in my CSS file it does work
header h1 {
color: white;
}
I do have an some understanding about specificy but I would assume declaring it with a class or id should be specific enough and go over the _reboot.scss file but it does not seem to. I am using BootStrap 5.
In your example cdn or node_modules css always on top. After that put your custom css files.
Order of prioritization when using multiple contradictory css files
I am fairly new to Angular and HTML.
I have two different components, let's say componentAand componentB, both with their repsective .html, .css and .ts files.
In componentA.css, I define some styles, e.g.:
.compA-style {
font-size: 20px;
}
Now in componentB.hmtl, I am using componentA's directive:
<compA></compA>
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
Note: I cannot change the style of componentA because I want to use the unmodifed style inside other components, I only want to change for the componentB.
Note: I already tried !important inside componentB.css, i.e. I tried this one:
.compA-style {
font-size: 30px !important;
}
And then in componentB.html:
<compA class=".compA-style"></compA>
But that didn't work.
Angular encapsulates CSS at component level.
This means that even if you have multiple CSS classes with the same name across multiple components, each of those components will use its own class, regardless of the DOM structure.
There are times when you might want to modify a child component styling, though.
You can do this in multiple ways. Let's assume compB contains compA.
::ng-deep
:host {
// ... Other styles
::ng-deep compA {
// ... Custom compA styles
}
}
Explanation: ::ng-deep selector provides cross-component visibility of CSS given its boundaries (wrapper selectors). Whatever you write within ::ng-deep compA will be shared with everything in compA.
WARNING: If you use ::ng-deep at base level in a component styling sheet (without a wrapper), the styles it contains will be spread both up and down across the application (NOT only within current component) and they load whenever the component loads. That is why it's usually wrapped into a :host selector.
Global style sheets
You can write custom styles in application base level styles.css file or create new css files to include at application load (outside Angular environment, for example with a <link> tag in index.html).
They are useful when you have a bunch of styles to overwrite that are the same across the application and don't want to mess with specific component stylesheets too much. Might not always be a good practice.
Add new component stylesheets in styleUrls array in the #Component decorator.
This might not necessarily apply to your case, but it's worth mentioning.
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
})
This is a good approach that helps keeping common styles in a single place while not making them global. You can add whatever styles you need to the specific component and split them as needed.
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
There is only way to add styles without edit component-A directly.
on componentB.css
:host ::ng-deep compA-style {
font-size: 30px !important;
}
on componentA.html
<compA class="compA-style"></compA>
NOTE: This functionality is deprecated.
Checkout docs ng-deep.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Problem: I'm using React Router Links and I can't figure out how to style them (I want to change font color and delete the underline).
I've been reading different documents but still can't figure out how to do this. One page said to just use NavLink instead of Link. I've used NavLink to create a navigation bar on my page and I've styled that with no problems but I feel like using a NavLink when it's not up in the navigation bar probably isn't the correct way to go?
Print screen of code
Print screen of page
You can create a className called "default-link"
and then do text-decoration none;
.default-link{
text-decoration: none !important;
}
feel free to let me know if this is what you meant.
An example of it can be found here: Remove stubborn underline from link
In Git-Repro https://github.com/Turbo87/sidebar-v2 sidebar-v2 is presented but I can not bring it to work with ol5 when I like to import in a external .js file the necessary sidebar-v2 methods.
Tried to include the repros content into my repro but still can not run ol.control.sidebar
The div of the sidebar hast to be in the div of the map. Additionally add display: block;
position: relative; into the css #map style.
Solved the problem by adding
export {default as Sidebar} from 'sidebar-v2/js/ol5-sidebar.js';
to node_modules/ol/control.js
AND
import {Sidebar} from 'ol/control.js';
into the .js where the map is created.