Develop Reference

How exactly does styled-components syntax work?

I was looking at styled-components and I saw this syntax:
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
I can't understand what is going on under the hood and what property is actually applied to the styled object.
Is there anyone that can explain to me how this code even runs?

Read about tagged templates
This is basically a function, but you can run it without ()
const styled = data => {
return data + ' JavaScript';
};
const data = styled `I love`;
console.log(data);
Examples with built-in functions:
console.log('a b c'.split ` `)
console.log(Object.entries `abc`)
console.log([1, 2, 3].concat `abc`)

You create styled h1 element, for example in Header component :
const Title = styled.h1`
font-size: 2rem;
text-align: center;
color: blue;
`;
You use it like a <h1> tag but with custom name:
<Title>My portfolio</Title>
You finally get the static hash class name sc-<hashedStringName> and one is dynamic class:
<h1 class="sc-gsnERi fiwDZi">My portfolio</h1>
So styled-components:
generate static class name
generate dynamic class name

This basically allows you to create Custom Tag in JSX.
You can also pass props to the styling properties in styled-components.
If you have this jsx:
<Title>This is Custom H1</Title>
const Title = styled.h1`
color: red;
`
It will render HTML like this:
<h1 class="someRandomAlphabet">This is Custom H1</h1>
where the class of h1 tag will have these properties:
.someRandomAlphabet{
color: red;
}

Hide subcomponent vaadin-text-field from Component vaadin-date-picker

I'm new to Vaadin and trying to create an instance that hides the vaadin-text-field from the component vaadin-date-picker.
I started out by reading the documentation for vaadin-date-picker about the shadow DOM property stated here.
I tried with "Scoping Styles in a Theme Module" but the whole thing including the calendar icon disappeared.
Current code as below,
render() {
return html`
<dom-module id="trim-inputbox" theme-for="vaadin-date-picker">
<template>
<style>
:host(.special_field) [part="text-field"] {
visibility:hidden;
}
</style>
</template>
</dom-module>
<vaadin-date-picker class="special_field"></vaadin-date-picker>
`;
}
Thanks so much again for any kind help.

As you noticed already a calendar icon is part of a text-field itself.
In Styling section there is an example of using <vaadin-date-picker-light>:
<style>
.my-input2 input {
border: none;
font-size: 14px;
background: none;
}
</style>
<vaadin-date-picker-light>
<div class="my-input2">
<iron-icon icon="event"></iron-icon>
CHECK-IN:
<iron-input>
<input size="10">
</iron-input>
</div>
</vaadin-date-picker-light>
Maybe you could use this instead?

changing element>element style inside javascript function

I have this style showing a card, and I want to change it inside the function after picking the card. how can I use style.background = '#FFF'; on div#memory_board > div type?
div#memory_board > div{
background:black;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}

You could add the following to your CSS, which would be applied to the "picked" card <div>:
div#memory_board > div.picked {
background: #fff;
}
Once you've added the above to your style sheet, you would then add the picked class to the <div> elements directly under #memory_board element which would produce the desired visual result.
<div id="memory_board">
<div></div> <!-- regular style -->
<div></div> <!-- regular style -->
<div class="picked"></div> <!-- regular style with "picked" appearance -->
</div>
Update
To apply the picked class to the clicked <div> you need to update your cardIsSelected() function in your script:
function cardIsSelected(event, letter)
{
/* This will cause "picked" class to be added to the div being
clicked */
event.currentTarget.classList.add('picked');
/* Leave existing code */
}
You will also need to pass the event object to cardIsSelected by updating this line of your code as well:
output += '<div id="card'+i+'" onclick="cardIsSelected(event, \''+memory_array[i]+'\')">'+memory_array[i]+'</div>';
Here is a working CodePen

how to pass style using dangerouslySetInnerHTML in React

I'm injecting html in my react component using dangerouslySetInnerHTML in a format like this :
<div
className="mt-2 col variant-attr-cell p-0"
dangerouslySetInnerHTML = { {
__html: JSON.parse(attrs[i].snippet).snippet.replace("{text}",
attrs[i].choices[j].visualization_data)
} }
>
</div>
and it works fine but I'm trying to pass style to the injected html at the same time but don't know how!
I'm trying to add different styles to the injected html based on the api I get, something like this:
height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
FYI the injected html is something like this mostly:
<span></span>
and the styles must be added to this and not the container div!
Any solution is appreciated,
thanks.

You can still add the desired style. Just add another props style:
const styleObj = {
color: 'white',
backgroundColor: 'red'
};
<div
className="mt-2 col variant-attr-cell p-0"
dangerouslySetInnerHTML = {
{ __html: JSON.parse(attrs[i].snippet).snippet
.replace("{text}", attrs[i].choices[j].visualization_data)
}
}
style={styleObj}
>
</div>
If you're trying to add style inside the element that resides in the html, then you should have their styles there in the html itself.

I managed to do this by adding a ref to the container and using the useLayoutEffect hook.
const elRef = useRef();
useLayoutEffect(()=>{
if (elRef.current){
elRef.current.firstElementChild.style.height = '12px';
// set other style attributes
...
}
});
return <div
ref={elRef}
dangerouslySetInnerHTML={yourHTML}
/>
This assumes you only want to style the first child of your container, but you could use a similar approach for multiple children.

Since I get the HTML from API, I set the style attribute for the HTML with a static value in the database and replaced the static value from API in my component!

You can easily style element in dangerousHTML like this style='background-color:red' instead style={{backgroundColor:'red'}}

How to change the theme color in less css using javascript/jquery

am using the below less css to change different theme color
#lightRed: #fdd;
#lightGreen: #dfd;
#lightBlue: #ddf;
#defaultThemeColor:#lightBlue;
#header{
.wrapper();
width:#defaultWidth;
height:80px;
margin-bottom:20px;
background:#defaultThemeColor;
}
#menu{
background:#defaultThemeColor;
}
And html is as follows:
<div id="swatch">
<ul>
<li>theme1</li>
<li>theme2</li>
<li>theme3</li>
</ul>
</div>
when theme1 is clicked #lightRed theme should be loaded, for theme2 #lightBlue and for theme3 #lightGreen
Please let me know how should be my javascript/ jquery to change the theme color on click

you could try using less.js functions like:
less.refreshStyles()
or
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
Something along this lines with jQuery and modifyVars on a .click event might work:
$('.theme_option').click(function(event){
event.preventDefault();
less.modifyVars({
'#defaultThemeColor': $(this).attr('data-theme')
});
});

using the on-click event to change the background color
this is example for changing the background color using on change..pls check it out [Example][http://jsfiddle.net/6YVes/]

If you just want to change the background color onclick li's, assign each li a class and trigger a jQuery click event on every class like below:
HTML:
<div id="swatch">
<ul>
<li><a class="red" href="">theme1</a></li>
<li><a class="green" href="">theme2</a></li>
<li><a class="blue" href="">theme3</a></li>
</ul>
</div>
JS:
$('.red').click(function(){
$(this).css('background-color',"red")
});
$('.green').click(function(){
$(this).css('background-color',"red")
});
$('.blue').click(function(){
$(this).css('background-color',"blue")
});

Note that lesscss is a Css that must be compilerd. That means you can not modify directly the behaviour of your lesscss but you can with css compiled. Browsers do no understand lesscss you have to keep it in mind.
So, I think the best way to do this is using two classes on the object you want to modify, one with the shape and another with the theme. In this way you can switch from one to anothr by modifying using jQuery the theme class. Imagine something like:
lesscss:
.theme-1 {
//Here goes your theme colors
}
.theme-2 {
//Here goes more theme colors and rules
}
#header {
.wrapper();
width:#defaultWidth;
height:80px;
margin-bottom:20px;
background:#defaultThemeColor;
}
And your html:
<div id="header" class="theme-1"/>
<button onclick="$('.theme-1').removeClass('theme-1').addClass('theme-2');" name="Change to theme 2"/>
<button onclick="$('.theme-2').removeClass('theme-2').addClass('theme-1');" name="Change to theme 1"/>
Hope it helps.

As prem suggested, it would be best to apply a class to each theme
CSS:
/* -- [ light blue theme (default) ] ---------- */
#header, #header.lightblue {
background: #ddf;
height: 80px;
margin-bottom: 20px;
width: 300px;
}
#menu, #menu.lightblue {
background: #ddf;
}
/* -- [ light red theme ] ---------- */
#header.lightred {
background: #fdd;
height: 95px;
margin-bottom: 10px;
width: 400px;
}
#menu.lightred {
background: #fdd;
}
/* -- [ light green theme ] ---------- */
#header.lightgreen {
background: #dfd;
height: 72px;
margin-bottom: 15px;
width: 290px;
}
#menu.lightgreen {
background: #dfd;
}
This way, to change each theme, you just have to change the class of the container object. Say the container object is the document body, then the body's class be changed to the desired theme.
HTML:
<div id="swatch">
<ul>
<li><a class="theme_option" data-theme="red" href="#">theme1</a></li>
<li><a class="theme_option" data-theme="green" href="#">theme2</a></li>
<li><a class="theme_option" data-theme="blue" href="#">theme3</a></li>
</ul>
</div>
JavaScript (jQuery):
jQuery('a.theme_option').click(function(e){
e.preventDefault();
var theme_class = jQuery(this).attr('data-theme');
jQuery(body).attr('class', theme_class);
}

the variables in css is a draft now!
http://www.w3.org/TR/css-variables/

Create classes by each color
Store class into local storage
change it using javascript function
<!DOCTYPE html>
<html lang="en" class="theme_name_1">
<head>
<style>
.theme_name_1{
color: #FFFF;
}
.theme_name_2{
color: #000;
}
</style>
</head>
<body>
<button id="switch" onclick="changeTheme()">Switch</button>
<script>
/* Script Save theme local storage to first load */
if (localStorage.getItem('theme') === 'theme_name_2') {
setTheme('theme_name_1');
} else {
setTheme('theme_name_2');
}
function setTheme(theme_name) {
localStorage.setItem('theme', theme_name);
document.documentElement.className = theme_name;
}
/*Change theme button click */
function changeTheme() {
if (localStorage.getItem('theme') === 'theme_name_2') {
setTheme('theme_name_1');
} else {
setTheme('theme_name_2');
}
}
</script>
</body>
</html>