ดาวน์โหลด styled mixin - styled mixin Source Source Download

styled mixin

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

หยุด.

เพียงแค่อ่านเอกสารองค์ประกอบใหม่ตอนนี้;)

-ผสมสไตล์

เสื้อคลุมที่เรียบง่ายสุด ๆ สำหรับการสร้างส่วนผสมที่มีสไตล์ผสมผสาน อาจจะเป็นไวยากรณ์ที่มนุษย์อ่านได้มากกว่าสำหรับกฎการเขียนทับ

ติดตั้ง

npm i --save styled-mixin

การใช้งาน

ขั้นพื้นฐาน

 import styled from 'styled-component' ;
import createMixin from 'styled-mixin' ;

const tomatoColorMixin = createMixin `
  color: tomato;
` ;

const Header = styled . h1 `
  color: black;
  font-size: 20px;
` ;

const Button = styled . button `
  color: black;
  border: none;
` ;

const TomatoHeader = tomatoColorMixin ( Header ) ;
const TomatoButton = tomatoColorMixin ( Button ) ;

ตอบสนองพื้นเมือง

ใช้

 import createMixin from 'styled-mixin/native' ;

หากคุณต้องการโหมด React-Native

ภาพเคลื่อนไหว

 import styled , { keyframes } from 'styled-component' ;
import createMixin from 'styled-mixin' ;

const Header = styled . h1 `
  color: black;
` ;

const rotate360Keyframes = keyframes `
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
` ;

const rotate = createMixin `
   animation: ${ rotate360Keyframes } 2s linear infinite;
` ;

const Uiiiii = rotate ( Header ) ;

กับอุปกรณ์ประกอบฉาก

 import styled from 'styled-component' ;
import createMixin from 'styled-mixin' ;

const blackOrTomatoMixin = createMixin `
  color: ${ props => props . tomato ? 'tomato' : 'black' } ;
` ;

const Button = blackOrTomatoMixin ( styled . button `
  border: none;
` ) ;

 < Button tomato > Tomato!!! </ Button >

มันเป็นรังได้

 import styled from 'styled-component' ;
import createMixin from 'styled-mixin' ;

const Header = styled . h1 `
  color: black;
` ;

const tomatoColorMixin = createMixin `
  color: tomato;
` ;

const fontSizeMixin = createMixin `
  font-size: 20px;
` ;

const TomatoHeader = tomatoColorMixin ( fontSizeMixin ( Header ) ) ;