i'm styling a React component with css modules.
there's a part where i insert html code using dangerouslySetInnerHTML
<div className={styles.article_text} dangerouslySetInnerHTML={{__html: props.text}} />
i have no control over this html code but i want to style it. i can style the html by using tag rules like this:
.article_text {
h2 {
#apply text-3xl mt-6 mb-4; /* this is applied to headings ... */
}
p {
#apply mb-3; /* and paragraphs */
}
...
what's not working is styling css classes this way:
.article_text {
.listblock {
#apply bg-white; /* this doesnt apply to the div.listblock inside the html code*/
}
is there a way i can get this to work?
Related
I have a react component that will be embedded into an old website. The problem is that this website has some global styles with tag selectors, e.g:
p {
font-size: 14px;
}
Removing these styles from the website is not an option.
So is there any way I can prevent these styles from reaching my component apart from just overriding them?
Create a particular css file for this component and again assign the style for p in this page particularly. It will replace the global one.
OR
You can use inline css because it has more preference than the external css.
You could wrap your .p inside your own class.
Example in plain HTML:
<div class = "you-wrapper">
...
...
...
<p></p>
...
</div>
And in you react code, add your own css:
.you-wrapper p { font-size: 15px; color:red;}
Edited:
/* your css */
.your-wrapper * { all: unset; }
.you-wrapper p { font-size: 15px; color:red;}
With a normal React/Vue component I normally create a custom CSS class and use that to style the component like so:
<div class="foo">
...
</div>
.foo {
}
With web components, there is the additional option to use the :host psuedo-selector. I understand that it can be used to apply styles to the web component HTML element itself.
<div class="foo">
...
</div>
.foo {
}
:host {
}
When should I use :host versus a custom CSS class like .foo?
An important part you do not mention, is that React (and other Frameworks), in the build step, rewrites all your classNames, to create "unique" class names.
React does not scope CSS like shadowDOM does.
Below answer is for a Web Component with shadowDOM;
Note that shadowDOM can be attached to regular DOM Elements as well. Same answer applies.
:host refers to your ... host...Web Component DOM element: <my-element>
Bluntly said, you could compare it to html,head,body in global CSS, it is the container element
The CSS inside does not (have to) know the element name my-element
classes (or any CSS selector you know) style Web Component content
OR, if you are not using shadowDOM, they style your whole document,
because unlike Frameworks, classNames are not changed, to be "unique", in the Build step.
And do learn <slot> behaviour:
::slotted CSS selector for nested children in shadowDOM slot
<style>
.foo {
border:1px solid red; /* CSS not applied to elements in shadowDOM */
font: 30px Arial; /* for UX consistancy, font styles DO style shadowDOM */
}
</style>
<span class="foo">
<my-element>Hello</my-element>
Web Components
<my-element pink>World</my-element>
</span>
<template id="MY-ELEMENT">
<style>
:host {
display:inline-block;
background:lightgreen;
}
:host([pink]) { background:hotpink }
.foo { font-weight:bold; /* does NOT style anything outside this shadowDOM */ }
</style>
<slot class="foo"></slot>
</template>
<script>
customElements.define('my-element', class extends HTMLElement {
constructor() {
super().attachShadow({mode: 'open'})
.append(document.getElementById(this.nodeName).content.cloneNode(true));
}
});
</script>
Throughout my code I use several icons from the Angular Material library.
Can I apply different css styles to them, based on their real type ?
Ex: I need the folder to have a different colour, and I need to do this only in a certain css theme, so I need to obtain this by applying a custom css style.
I tried something like:
<mat-icon class="mat-icon-folder">folder</mat-icon>
and then
.mat-icon#mat-icon-folder {
color: #FFDA6B;
}
or
.mat-icon-folder {
color: #FFDA6B;
}
in my css file, but with no success.
Any ideas ?
Thanks.
You have multiple ways to apply styling on your icon. You can check this online example, and here are some references to help you to write valid CSS.
CSS Selectors
CSS Specificity
/* by tag name */
mat-icon {
color: red;
}
/* by class selector */
.mat-icon-folder {
color: #ffda6b;
}
/* by tag name and class selector */
mat-icon.mat-icon-folder {
color: blue;
}
/* by tag name and id selector */
mat-icon#folder-icon {
color: purple;
}
Setting css styles for a p element in my application is affecting the p element inside a lit-element in IE11 only.
I have setup a very basic stackblitz example to show the issue. When you open this in IE11 you will notice the custom element p text is italic, that style is coming from outside. In other browsers, this does not happen.
Is this a known issue and can't be prevented for IE11? Or is there a way I can work around this?
I have reproduced the problem on my side, it can be possible that it is the IE browser default behavior. Because the outside CSS style is global style.
As a workaround, you could change your selectors to stop them matching the elements you don't want them to match. Such as the following sample (using a class selector to add CSS style):
Code in the index.html page:
<style>
.outer-p { font-style: italic; }
</style>
</head>
<body>
<p class="outer-p">Text outside element</p>
<my-element></my-element>
</body>
Code in the custom element (my-element.js)
class MyElement extends LitElement {
static get styles() {
return css`
.inner-p { display:block; font-weight: 900; color: #ff9900; }
`;
}
render() {
return html`
<p class="inner-p">Hello world! From my-element</p>
`;
}
}
As an example I got a css class which applies to all labels within my website.
label
{
font-size: 18px;
}
Now after i install a external JS plugin i find that the plugin itself is affected by my base css.
<div>
<div class="plugin" />
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
The plugin has its own stylesheet so how can i prevent my base css style touching any elements within the plugin div?
EDIT
I must add that label was a very simple example. The actual layout is more complex with global styles touching various elements.
Don't make your css too general, try to be as specific as possible when you want to style only some of your elements. If you can't select your elements without affecting the plugin's elements add a class to them.
label{ /* too general, don't use this */
/* ... */
}
body > div > form > label{ /* more specific, but maybe still affecting your plugin */
/* ... */
}
label.noplugin{ /* use a class on non-plugin elements */
/* ... */
}
div:not(.plugin) > label{ /* affecting only children of div which are NOT
tagged with the plugin class */
/* ... */
}
So in your case a better way to style your label would be
<div>
<div class="plugin">
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
</div>
CSS:
*:not(.plugin) > label
{
font-size: 18px;
}
Please note that :not is unfortunately not supported by IE ≤8.
You need to do two things.
i) Give your parent container ID
ii) And style child label of container.
Here is fiddle workout.