styled-components all in one

CSS in JS

# 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>

);

demos



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>

)

tagged templates

`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

refs

https://www.cnblogs.com/xgqfrms/p/10043199.html

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

巴特西

styled-components all in one

styled-components all in one

demos

tagged templates

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

最新文章

热门文章

巴特西

styled-components all in one

styled-components all in one

demos

tagged templates

refs

xgqfrms 2012-2020 www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

最新文章

热门文章

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！