[css] React.js 인라인 스타일 모범 사례

아직 “모범 사례”는 많지 않습니다. React 구성 요소에 인라인 스타일을 사용하는 사람들은 여전히 ​​실험 중입니다.

인라인 스타일 lib 비교 차트에 반응 하는 방식은 매우 다양합니다.

전부 아니면 아무것도?

“스타일”이라고하는 것은 실제로 몇 가지 개념을 포함합니다.

• 레이아웃 — 요소 / 구성 요소가 다른 요소와 관계가있는 방식
• 모양 — 요소 / 구성 요소의 특성
• 동작 및 상태 — 특정 상태에서 요소 / 구성 요소가 보이는 방식

상태 스타일로 시작

React는 이미 구성 요소의 상태를 관리 하고 있습니다. 구성 요소 논리와의 배치에 자연스럽게 적합합니다.

조건부 상태 클래스로 렌더링 할 구성 요소를 구축하는 대신 상태 스타일을 직접 추가하는 것이 좋습니다.

// Typical component with state-classes
<li
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

우리는 스타일을 표현 하기 위해 클래스를 사용하고 있지만 더 이상 상태와 행동에.is- 접두사 클래스를 사용하지 않습니다. .

우리는 사용할 수 있습니다 Object.assign(ES6) 또는 _.extend(밑줄 / lodash가) 여러 국가에 대한 지원을 추가 할 :

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

커스터마이징 및 재사용

이제 우리는 Object.assign그것을 사용하여 구성 요소를 다른 스타일로 재사용 할 수있게하는 것이 매우 간단 해졌습니다. 기본 스타일을 재정의하려면 콜 사이트에서 소품을 사용하여 다음과 같이 할 수 <TodoItem dueStyle={ fontWeight: "bold" } />있습니다. 다음과 같이 구현되었습니다.

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

나열한 것

개인적으로 인라인 레이아웃 스타일에 대한 설득력있는 이유는 없습니다. 많은 훌륭한 CSS 레이아웃 시스템이 있습니다. 하나만 사용하겠습니다.

즉, 레이아웃 스타일을 구성 요소에 직접 추가하지 마십시오. 컴포넌트를 레이아웃 컴포넌트로 감싸십시오. 다음은 예입니다.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

레이아웃 지원을 위해 종종 구성 요소를 100% width및 로 디자인하려고합니다 height.

외관

이것은 “인라인 스타일”토론에서 가장 논쟁이 많은 부분입니다. 궁극적으로 JavaScript를 사용하여 디자인하는 구성 요소와 팀의 편의에 달려 있습니다.

한 가지 확실한 것은 도서관의 도움이 필요하다는 것입니다. 원시 React에서 브라우저 상태 ( :hover, :focus) 및 미디어 쿼리는 고통 스럽습니다.

이 어려운 부분의 구문은 SASS의 구문을 모델링하도록 설계 되었기 때문에 Radium을 좋아 합니다.

코드 구성

종종 모듈 외부에 스타일 객체가 나타납니다. 할 일 목록 구성 요소의 경우 다음과 같이 보일 수 있습니다.

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

게터 함수

템플릿에 스타일 로직을 추가하면 위와 같이 약간 지저분해질 수 있습니다. 스타일을 계산하기 위해 getter 함수를 만들고 싶습니다.

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

더보고

올해 초 React Europe : Inline Styles 및 ‘CSS 만 사용하는 것이 가장 좋은시기’ 에서이 모든 것들에 대해 자세히 설명했습니다 .

당신이 길을 따라 새로운 발견을 같이 내가 도와 드리겠습니다 🙂 나를 때려 -> @chantastic

답변

<span style={{float:'right'}}>{'Download Audit'}</span>

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

custom-component {
   display: block; /* have it work as a div */
   color: 'white';
   fontSize: 200;
}
custom-component h1 {
  font-size: 1.4em;
}