nano style

나노 스타일

기능적 CSS-in-JS에 반응합니다

npm i nano-style

• 객체 리터럴 또는 CSS 구문을 사용하십시오
• 순수한 반응 - 부작용 없음
• 기능적 스타일
• 주제 지원
• 추가 설정이없는 범용 렌더링
• 렌더링 된 HTML에서 propttypes로 정의 된 소품을 제거합니다

용법

물체 문자 그대로 구문

 import styled from 'nano-style'

const Button = styled ( 'button' ) ( props => ( {
  fontFamily : 'inherit' ,
  fontSize : '14px' ,
  fontWeight : props . theme . bold ,
  lineHeight : 16 / 14 ,
  display : 'inline-block' ,
  margin : 0 ,
  paddingLeft : props . theme . space [ 3 ] + 'px' ,
  paddingRight : props . theme . space [ 3 ] + 'px' ,
  paddingTop : props . theme . space [ 2 ] + 'px' ,
  paddingBottom : props . theme . space [ 2 ] + 'px' ,
  verticalAlign : 'middle' ,
  textAlign : 'center' ,
  textDecoration : 'none' ,
  borderRadius : props . theme . radius ,
  border : 0 ,
  appearance : 'none' ,
  color : 'white' ,
  backgroundColor : props . theme . colors . blue ,
  '&:hover' : {
    boxShadow : `inset 0 0 0 999px ${ darken ( 1 / 8 ) } `
  } ,
  '&:focus' : {
    outline : 0 ,
    boxShadow : `0 0 0 2px ${ props . theme . colors . blue } `
  } ,
  '&:active' : {
    boxShadow : `inset 0 0 8px ${ darken ( 1 / 4 ) } `
  } ,
  '&:disabled' : {
    opacity : 1 / 4
  }
} ) )

CSS 구문

 import styled from 'nano-style/css'

const Button = styled ( 'button' ) `
  font-family: inherit;
  font-size: 14px;
  font-weight: ${ props => props . theme . bold } ;
  line-height: ${ 16 / 14 } ;
  display: inline-block;
  margin: 0;
  padding-left: ${ props => props . theme . space [ 3 ] + 'px' } ;
  padding-right: ${ props => props . theme . space [ 3 ] + 'px' } ;
  padding-top: ${ props => props . theme . space [ 2 ] + 'px' } ;
  padding-bottom: ${ props => props . theme . space [ 2 ] + 'px' } ;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: ${ props => props . theme . radius } ;
  border: 0;
  appearance: none;
  color: white;
  background-color: props.theme.colors.blue;

  &:hover {
    box-shadow: inset 0 0 0 999px ${ darken ( 1 / 8 ) } ;
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px ${ props => props . theme . colors . blue } ;
  }

  &:active {
    box-shadow: inset 0 0 8px ${ darken ( 1 / 4 ) } ;
  }

  &:disabled {
    opacity: 1/4
  }
` 

작동 방식

반응 16의 요소 배열을 반환하는 능력을 사용하여 Nano 스타일은 구성 요소 렌더링 중에 CSS를 생성하고 CSS를 구성 요소와 함께 인식 된 <style> 요소에 삽입합니다. 반환 된 배열은 다음과 같습니다.

 return [
  < Style css = { css } /> ,
  < Component { ... props } />
]

경고

현재이 접근법은 단일 구성 요소가 여러 인스턴스에서 렌더링 될 때 반복 된 CS를 제거하려고 시도하지 않습니다. 이것이 작동하지만 구성 요소가 한 페이지에서 여러 번 사용될 때 약간의 성능 문제가 발생할 수 있습니다.

개선을위한 잠재적 영역

• 캐싱 메커니즘
• 바벨 플러그인

MIT 라이센스