styled mixin

멈추다.

지금 새로운 스타일의 컴포넌트 문서를 읽으십시오.)

스타일링 믹신

스타일링 컴포넌트 믹스 인을 만들기위한 매우 간단한 래퍼. 아마도 덮어 쓰기 규칙에 대한 인간이 읽을 수있는 구문 일 것입니다

설치하다

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' ;

반응 네이티브 모드가 필요한 경우.

애니메이션

 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 ) ) ; 

작가

드미트리 파블로브 스키