I have a child element that is rendering with a simple string custom class passed from a variable. Since it's a variable and will change, I want to write conditional styles in scss. Example shown when variable is 'poor' -> current.range.total = 'poor'.
<div className={styles.score__content}>
<div className={current.range.total}>
My scss is:
&__content {
.poor {
padding: 2em 2.81em;
background-color: #000 !important;
}
}
I've also tried:
<div className={styles.score__content + ' ' + current.range.total}>
And then scss:
&__content {
&.poor {
padding: 2em 2.81em;
background-color: #000;
}
}
But to no avail. Any ideas why the styles aren't being applied?
Related
While I know you can't write variables like
root: {
--aic: align-items:center;;
}
Is there anyway to get round this, by combining the various parts seperately? The obvious obstical here is the requirement of the colon inside the variable.
i.e.
root: {
--ai: align-items:;
--center: center;
--aic:
var(--ai)
var(--center);
}
.myclass {var(--aic);}
I would suggest you to switch to SCSS and use a #mixin. Read more about it here.
Here's a live demo.
HTML:
<div id="test">TEST</div>
SCSS:
:root {
--text_color: red;
--background_color: gold;
}
#mixin my_mixin {
color: var(--text_color);
background-color: var(--background_color);
}
#test {
#include my_mixin;
}
Based on my comment on your question, you can use classes to achieve something similar. But you can't use custom properties as CSS properties, only values -- it's the same as saying for example margin: margin: var(--customMargin);;
/* Layout unrelated to answer */
div { border: 1px solid black; color: white }
.varText { background-color: red }
.varPad { background-color: blue }
.varText.varPad { background-color: green }
/* Answer */
:root { --size: 1rem }
.varText { font-size: var(--size) }
.varPad { padding: var(--size) }
<div class="varText">
Size Text only to root variable
</div>
<div class="varText" style="--size: 2rem">
Size Text only to inline variable
</div>
<div class="varPad">
Size Padding only to root variable
</div>
<div class="varPad" style="--size: 2rem">
Size Padding only to inline variable
</div>
<div class="varText varPad">
Size Text and Padding to root variable
</div>
<div class="varText varPad" style="--size: 2rem">
Size Text and Padding to inline variable
</div>
i have setup react big calendar on two different pages and have applied some styling on it through external CSS
i have tried using important tag in css but it only fix one page and disturb other
First file CSS
.rbc-timeslot-group {
min-height:120px ;
/* border-left: 1px solid #000000 */
}
Second file CSS
.rbc-timeslot-group {
min-height:20px ;
/* border-left: 1px solid #000000 */
}
i want to achieve different CSS on both pages but end up fixing one and disturbing other
Update
This is how I'd approach things using React/JSX:
class Demo extends React.Component {
render() {
const BigCalendar = ({classes}) => (
<div className={`rbc-timeslot-group ${classes}`}></div>
)
return (
<div>
<BigCalendar />
<BigCalendar classes="second" />
<BigCalendar classes="third" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector("#app"))
And the CSS
.rbc-timeslot-group {
width: 50px;
height: 50px;
background-color: red;
}
.rbc-timeslot-group.second {
background-color: green;
}
.rbc-timeslot-group.third {
background-color: blue;
}
jsFiddle
You need to introduce greater specificity in your CSS. For example, start with a base style that works for the default case and, most importantly, is available to all pages, globally.
.rbc-timeslot-group {
min-height: 120px ;
}
Then, extend from there using another class. This would be declared on another page.
.another-page.rbc-timeslot-group {
min-height: 20px;
}
<div class="rbc-timeslot-group another-page">…</div>
And so on…
.yet-another-page.rbc-timeslot-group {
min-height: 40px;
}
<div class="rbc-timeslot-group yet-another-page">…</div>
Don't know whether its an elegant solution,but was able to resolve my issue by enclosing my component in another div and overriding that div e.g
<div className="first">
<BigCalendar>
</BigCalendar>
</div>
<div className="second">
<BigCalendar>
</BigCalendar>
</div>
in css
I did
.first.rbc-timeslot-group{
min-height:20px !important;
}
.second.rbc-timeslot-group{
min-height:20px !important;
}
I have a very simple problem with CSS variables. I would like to swap two CSS variables, basically the CSS equivalent of [a, b] = [b, a] in ES6. Here's a simple example:
<p>White background</p>
<button>Black background</button>
<div>
<p>Black background</p>
<button>White background</button>
</div>
:root {
--primary-color: #fff;
--secondary-color: #000;
}
body {
background-color: var(--primary-color);
}
button {
background-color: var(--secondary-color);
}
div {
/* i'd like to do the following: */
--primary-color: var(--secondary-color);
--secondary-color: var(--primary-color);
/* so here, `--primary-color` would be `--secondary-color` from `:root`
* and any children have these colors swapped as well
*/
background-color: var(--primary-color);
}
However, this fails because CSS var()s are live bindings. Am I missing something here? Or is this the way the spec currently works?
You are creating a cyclic dependence because you are defining each property using the other one and this won't work. Instead you may try something like this by introducing more variables:
:root {
--p:#fff;
--s:#000;
--primary-color: var(--p);
--secondary-color: var(--s);
}
body {
background-color: var(--primary-color);
}
button {
background-color: var(--secondary-color);
}
div {
/* i'd like to do the following: */
--primary-color: var(--s);
--secondary-color: var(--p);
background-color: var(--primary-color);
}
<p>White background</p>
<button>Black background</button>
<div>
<p>Black background</p>
<button>White background</button>
</div>
Let's say that I have a custom web element called <my-course> with its own style defined in the <style> tag inside the definition and I do not want to alter this element's file at all as it's an external dependency of my project.
This <my-course> element has a <div> child defined in the <template> tag.
Example:
<dom-module id="my-course">
<template>
<style>
::host {
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: red;
}
</style>
<h1>This is my custom course element</h1>
<div id="progress"></div>
</template>
<script>
class MyCourse extends Polymer.Element {
static get is() {
return 'my-course';
}
}
window.customElements.define(MyCourse.is, MyCourse);
</script>
</dom-module>
I want to make the div#progress green with "background: green;" (it's red by default) via an external stylesheet that is loaded in the same page as the custom element is attached/used.
I tried to do:
my-course div#progress {
background: green;
}
But it does not work, the progress div keeps being red. There seems there is no way to style the shadow dom from outside the element itself, I've tried my-course::content div#progress, and has no result (/deep/ and ::shadow are deprecated) I previously achieved this using ::shadow.
Anyone can help? Thanks
You should use CSS variables, such as:
::host {
--progress-background: red;
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: var(--progress-background);
}
And to overrride it:
my-course {
--progress-background: green;
}
More info here: https://www.polymer-project.org/2.0/start/first-element/step-5
Suppose the following code:
<div id="body" class='bodyLogin'>
#body {
background-color: red;
}
I would like to override the background colour through the class attribute, like this:
#body .bodyLogin {
background-color: blue;
}
but this doesn't work.
Similarly:
.bodyLogin {
background-color: blue;
}
doesn't work due to CSS hierarchy.
The space between your two selectors is meaningful. In fact it is a selector: the descendant selector. It means you select all of class bodyLogin descendant of an element with id body.
Get rid of the space and you select elements that are both #body and .bodyLogin:
#body {
background-color: red;
}
#body.bodyLogin {
background-color: blue;
}
<div id="body" class='bodyLogin'>Test</div>