I try to style my component using:
export const StyleCascader = styled(Cascader)`
background-color: gray;
ul.ant-cascader-menu {
background: red !important;
}
`;
Here i am using styled components, but even i added !important, the styles don't appear. What could be the issue?
Demo: https://codesandbox.io/s/custom-trigger-ant-design-demo-gw0kb?file=/StyleCascader.js:74-210
You mentioned ul.ant-cascader-menu selector, but there is no such element in DOM.
https://codesandbox.io/s/custom-trigger-ant-design-demo-f9gb5
Related
I have code like this:
<theme-component theme="dark">
<my-component></my-component>
</theme-component>
Is it possible for my-component to know it is within theme-component with a theme of dark? Or do I also need to pass theme=dark manually into my-component?
my-component has styles defined like this:
static darkStyle = css`
:host {
--my-bkg: #535353;
--my-items: #474747;
--my-gutter: #4a4a4a;
--my-border: #474747;
--my-item-border: #535353; /* on dark themes only this is the same color as the background instead of the footer border */
--my-divider: #636363;
}
`;
static lightStyle = css`
:host {
--my-bkg: #b8b8b8;
--my-items: #c7c7c7;
--my-gutter: #ababab;
--my-border: #adadad;
--my-item-border: #adadad; /* on light themes only this is the same color as the footer border */
--my-divider: #9e9e9e;
}
`;
static styles = [this.darkStyle, sheet];
I would love to have some kind of ternary to switch between this.darkStyle or this.lightStyle. Or is there some kind of CSS I can write that is like
static styles = [css`
theme-component[theme=dark] :root {
--my-bkg: #535353;
}
`, sheet];
I see documentation about SuperElement.styles, but it's not clear to me how to use that when I am relying on variables based on an attribute here. I'm not trying to share a style as much as use the attribute to determine some new variables.
Edit after clarifications:
A component could technically find out the attribute on a direct parent component by imperatively doing the following:
this.parentElement.getAttribute('theme').
I am not sure how that could be done in CSS. Below this edit I've outlined a common approach to solving the issue of theming using CSS custom-properties which have the default behavior of inheriting through the shadow DOM. Also see video by Lit team: "How to style your Lit elements" for more context.
Original answer:
I think what you're looking for is the :host() CSS pseudo-class function.
Your setup is correct where the theme-component is providing CSS custom properties that inherit to all children. my-component does not need any changes.
The only change from your example that should be needed is:
static darkStyle = css`
:host([theme="dark"]) {
--my-bkg: #535353;
--my-items: #474747;
--my-gutter: #4a4a4a;
--my-border: #474747;
--my-item-border: #535353;
--my-divider: #636363;
}
`;
This will select and apply the dark theme CSS custom properties when the theme-component has the theme attribute set to value "dark". These custom properties will then inherit into the children.
Runnable sample:
<script type="module">
import {html, css, LitElement} from "https://cdn.jsdelivr.net/gh/lit/dist#2/core/lit-core.min.js";
class ThemeEl extends LitElement {
static styles = css`
:host {
--my-bkg: green;
display: block;
border: 2px dotted var(--my-bkg);
}
:host([theme="dark"]) {
--my-bkg: gray;
}
`;
render() { return html`<slot></slot>`; }
}
class ChildEl extends LitElement {
static styles = css`
:host {
display: block;
background-color: var(--my-bkg);
}
`;
render() { return html`<p>Child El</p>`; }
}
customElements.define('theme-el', ThemeEl);
customElements.define('child-el', ChildEl);
</script>
<theme-el>
<p>Default Theme</p>
<child-el></child-el>
</theme-el>
<theme-el theme="dark">
<p>Dark Theme</p>
<child-el></child-el>
</theme-el>
This technique can also be used such that a custom element can change its own host styling. By setting attributes on itself and using :host().
If the child component also needs to know what theme is set from JavaScript, that could also be communicated via a CSS custom property and queried with window.getComputedStyle(this).getPropertyValue(<custom property>).
I just started learning ReactJS and I made a Project with .scss
For some reason when I add a style in a .scss file that style also changes other components' styles as well.
example:
I add a li style in the Home.scss, but it will change the style of the Footer component's li too. I didn't import it into the Footer.js or anything.
Does anyone know what is the reason why does it do it, and what is the solution?
Adding a className per component won't solve your problem, it will work as expected until you have any nested component.
Because if you add
#component-name {
li {
...
}
}
The CSS will be applied to any component inside of that component too.
To limit your CSS to a component in react, you have a few options :
CSS Modules
Create React App supports CSS Modules out of the box (as of version 2)
It works with SCSS too (YourComponent.module.scss)
YourComponent.js:
import styles from './YourComponent.module.css'
export const YourComponent () => {
<ul>
<li className={styles.yourLi}>
</ul>
}
YourComponent.module.scss:
.yourLi {
color: blue;
}
CSS-in-JS
With this method, as the name suggests, you can declare your CSS within your JS.
There are multiple libraries to implement this.
Styled-Components
Here is an example with styled components which is the one that seems to be the most used as of today:
const YourLi = styled.li`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
render(
<div>
<ul>
<YourLi>
Your styled li
</YourLi>
</ul>
</div>
)
Add a class footer in the first div of footer component
sass allows nested defining of classes like
.footer{
li{
}
}
using that can help.
since it doesn't matter where you import scss in react. styles are imported globally by default.
I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css.
/* UserProfile.css */
.custom-class {
margin-top: 30 !important;
color: pink;
}
UserProfile in render method have
<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink
I have an option to
<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>
this works fine, but I prefer style code in css files.
I am not sure maybe that issue has no relation to overriding.
you should use px in css files, change your code to margin-top: 30px !important; and it should work.
And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.
You'll need to use camelCase for your classname, so .customClass instead of .custom-class.
Then your import statement should look like:
import css from './UserProfile.css`;
and in your component:
<h1 className={css.customClass}>Title</h1>
Read up on CSS Modules for more information.
You don't have a unit for margin-top in your css class
.custom-class {
margin-top: 30px !important;
color: pink;
}
I have a form in my application where I use the following code from Primafaces:
...other inputs...
<label for="workshopTags">Tags</label>
<p-chips
[(ngModel)]="values"
name="workshopTags"
id="workshopTags"
></p-chips>
I am able to display the Chip element correctly but I would like to style it putting its width to 100% and the height to 100px, but nothing seems to work to change those. This solution didn't work for me. I tried to set a styleClass or an inline style as the documentation suggest but they didn't work either. If I write inline:
style="width: 100%"
The following error is thrown:
Error: Cannot find a differ supporting object 'width: 100%;'
How can I make it work?
there are tow methos to style primeng component overwrite the original style or by create a custom style base on custome class
overwrite
add the style to global style.css or style.scss , this method for overwrite primeng component style without add extra class to the component.
.ui-chips {
display: inline-block
}
.ui-chips ul {
border:2px dashed green !important; /* 👈 I have use important */
}
.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: green !important; /* 👈 I have use important */
border:1px solid #005555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍏🍏
custome style
the method above will change the style of all p-chips component in the entier project , by this method you need to set styleClass property so you can create different style like the example here 👇 , but you need to set styleClass property for every component
<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>
style.css
.p-chips.ui-chips {
/* border:1px solid #ff2200; */
display: inline-block
}
.p-chips.ui-chips ul {
border:2px dashed orange;
}
.p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: orange;
border:1px solid #ff5555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍊🍊
You can use ht /deep/ modifier ,add this inside your app.component.css and delete it from your style.css, and you don't need !important to force the style here, delete it. here is what you are looking for
p {
font-family: Lato;
}
/deep/ .p-chips > .ui-inputtext {
width: 100%;
height: 100px;
}
check it here https://stackblitz.com/edit/angular-primeng-startup-kmm7xw
You could try encapsulation: ViewEncapsulation.None in your override component decorator:
#Component({
selector: 'app-chip',
templateUrl: 'path-to-template where you use ui-chips',
styleUrls: ['path-to-styles where you could override ui-chips styles'],
encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }
To set the width to 100%, you have to use the style or styleClass attribute and set the css property display: block.
As an example using the styleClass attribute
<p-chips
[(ngModel)]="interests"
styleClass="block">
</p-chips>
Here I am using Prime Flex v3 with PrimeNg.
I'm trying to add ngx-charts-gauge on angular5 app page.
Following these : https://swimlane.gitbooks.io/ngx-charts/content/charts/gauge.html
Everything works fine except I don't find any way or attribute or info to change Big center title color...It stills black !
I tried to override css class...with no chance.
.chart-container {
color: white;
}
Any help would be appreciated.
Thanks.
Change your css as below it will work
:host /deep/ .chart-container {
color: white;
}
OR
:host ::ng-deep .chart-container {
color: white;
}
Reason: Component style only applies to the html in component.
To force a style down to the child component use /deep/
documentation, another reference