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

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

著者

Dmitry Pavlovsky