I have some very basic code like this
#component file
import { html, LitElement } from 'lit';
import sheet from './css/styles.js';
export class CaiWc extends LitElement {
static styles = [sheet];
render() {
return html`
<h2>Hello World</h2>
<div>ITEM 1</div>
<div>ITEM 2</div>
<div>ITEM 3</div>
`;
}
}
#styles.js
import { css } from 'lit';
export default css`
:root {
background-color: #0000cc;
color: #ff0000;
}
:host {
background-color: #ff0000;
color: #0000cc;
}
`;
I don't understand why no background colors are showing up. When my markup was more complex with a third party web component, that web component would have the background color set from :host. If I read https://developer.mozilla.org/en-US/docs/Web/CSS/background-color correctly, background color isn't inherited. However if the default is transparent, why isn't it filling in?
By default, the custom element host defaults to display: inline - which results in the background-color not showing up. Additionally setting width and height would have no effect.
Adding display: block; or display: inline-block; to your :host styles should fix the issue, recommended by these Custom Element Best Practices.
There is also some discussion around this behavior in this Github issue: Should shadow host have display: block by default.
And followup discussion around resolving this issue: Provide a lightweight mechanism to add styles to a custom element.
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 am creating a ReactJs app, and am trying to apply styles. I load styles in the normal way (without webpack css modules):
import React, {Component} from 'react';
//styles
import './Header.css';
class Header extends Component {
render() {
return(
<div className='header'>
<h1>Save</h1>
</div>
);
}
}
The styles that I have for the header class apply, and everything is groovy. But for about 50% of my ReactJs files and their subsequent CSS files, the class styles do not apply. There is no error either, it finds the CSS and just doesn't apply the styles on some of the files.
I have no idea what is wrong, thanks!
EDIT 1
The header.css file:
.header {
width: 100%;
top: 0;
left:0;
text-align: right;
height: 100px;
margin: 0 auto;
}
.header h1 {
margin: 0;
margin-right: 40px;
cursor: pointer;
}
Edit 2
Example of class whose styles don't apply
Matrix.js:
import './Matrix.css';
render() {
const {users, selectedDivision} = this.state;
return(
<div className='container' style={{display:'grid', gridTemplateColumns:'200px 1fr'}}>
<div style={{textAlign: 'left'}}>
<input type='text' placeholder="Search Divisions" onChange={(e)=>this.search(e)} className='searchDivs'/>
<Scroller divisions={this.state.displayDivisions} handleSelectedDivisionChange={this.handleSelectedDivisionChange.bind(this)} />
</div>
<div style={{marginLeft: '10px'}}>
<Division division={selectedDivision} users={users} addToParentDivisions={this.handleNewUserAddedToDivision.bind(this)}/>
</div>
</div>
);
}
Here my work around has been to use inline styles but I want to try to avoid this as a best practice
Edit 3
Looking at dev tools in Chrome it shows that my css is not loaded because they are invalid property values?
So React is loading in the styles, but just refusing to display because they are invalid?
Just had the exact same problem!
Solution: Remove quotation marks (") around your property values.
Inline styles in JS require them but CSS does not.
I work in CSS every day I should've known this.
VSCode didn't pick it up either.
(Facepalm)
Assuming everything else is working properly like importing the right css file, using className, etc. I've found that, on rare occasions, something gets stuck in the browser cache and needs a full refresh.
Mac: Command+shift+R
Win: Ctrl+shift+R
I am having a bizarre issue whilst creating my first Angular2 app.
I am applying some CSS to a component host (example-component) yet it doesn't appear in the browser?
This is my first time posting for Angular in SO, so hopefully I include everything needed to attain some help.
example.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'crate',
templateUrl: './app/folderA/folderAB/crate.html',
styleUrls: ['./app/folderA/folderAB/crate.css']
})
export class MyComponent {}
index.html
crate.html
<div class="background">
<div class="content">
<p>Content</p>
</div>
</div>
crate.css
:host-context(.lg){
width: 100%;
background-color: #000;
border-radius: 25px;
}
What I don't understand, is that I open this in chrome & firefox, and I see the following CSS stated under rules for example.component.
.lg[_nghost-ims-2], .lg [_nghost-ims-2] {
width: 100%;
background-color: #000;
border-radius: 25px;
}
It is correctly applying the CSS to example-component, but it is not being displayed / rendered in browser. What am I doing wrong / missing?
EDIT
The exact same issue applies even if I change crate.css to:
crate{
width: 100%;
background-color: #000;
border-radius: 25px;
}
Any component with an unrecognized tagName like <crate></crate> is created as a HTMLUnknownElement and has empty values for all the style properties, if you want it to behave like a div then add display: block; to your stylesheet.
See Browsers' default CSS for HTML elements for additional resources on the default css for different browsers.