CSS in JS
https://www.styled-components.com/
https://github.com/styled-components
# install
$ yarn add styled-components
$ npm i -S styled-components
import styled from 'styled-components'
// const Button = styled.button``
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0 1em;
padding: 0.25em 1em;
`
import styled, { css } from 'styled-components'
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0 1em;
padding: 0.25em 1em;
${props =>
props.primary &&
css`
background: palevioletred;
color: white;
`};
`
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0.5em 1em;
padding: 0.25em 1em;
${props => props.primary && css`
background: palevioletred;
color: white;
`}
`;
const Container = styled.div`
text-align: center;
`
render(
<Container>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</Container>
);
const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
/* The GitHub button is a primary button
* edit this to target it specifically! */
${props => props.primary && css`
background: white;
color: black;
`}
`
render(
<div>
<Button
href="https://github.com/styled-components/styled-components"
target="_blank"
rel="noopener"
primary
>
GitHub
</Button>
<Button as={Link} href="/docs">
Documentation
</Button>
</div>
)
const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
/* The GitHub button is a primary button
* edit this to target it specifically! */
${props => props.primary && css`
background: white;
color: black;
`}
`
render(
<div>
<Button
href="https://github.com/styled-components/styled-components"
target="_blank"
rel="noopener"
primary
>
GitHub
</Button>
<Button as={Link} href="/docs">
Documentation
</Button>
</div>
)
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag`string text ${expression} string text`
demo
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-09-21
* @modified
*
* @description
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link
* @solutions
*
* @best_solutions
*
*/
const log = console.log;
// tagged templates
const name = `xgqfrms`;
const age = 23;
const title = "CEO";
const taggedTemplateFunc = (strs, arg1, arg2, ...args) => {
log(`\nstrs`, strs);
log(`arg1`, arg1);
log(`arg2`, arg2);
log(`args`, args);
return strs[0] + arg1 + strs[1] + arg2;
}
taggedTemplateFunc`name=${name}, age=${age}, title=${title}`;
const q = `what's your name`;
taggedTemplateFunc`${q}, name=${name}, age=${age}, title=${title}`;
/*
$ node tagged-templates.js
strs [ 'name=', ', age=', ', title=', '' ]
arg1 xgqfrms
arg2 23
args [ 'CEO' ]
strs [ '', ', name=', ', age=', ', title=', '' ]
arg1 what's your name
arg2 xgqfrms
args [ 23, 'CEO' ]
*/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates
let person = 'Mike';
let age = 28;
function myTag(strings, personExp, ageExp) {
let str0 = strings[0]; // "That "
let str1 = strings[1]; // " is a "
// let str2 = strings[2]; // ""
// There is technically a string after the final expression (in our example), but it is empty (""), so disregard.
let ageStr;
if (ageExp > 99){
ageStr = 'centenarian';
} else {
ageStr = 'youngster';
}
// We can even return a string built using a template literal
return `${str0}${personExp}${str1}${ageStr}`;
}
let output = myTag`That ${person} is a ${age}`;
console.log(output);
// That Mike is a youngster
https://www.cnblogs.com/xgqfrms/p/10043199.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
手机扫一扫
移动阅读更方便
你可能感兴趣的文章