React: 스타일을 어떻게 캡슐화합니까?

인라인 스타일을 수행하는 방법에 대한이 문서를 본 적이 있다고 가정합니다. http://facebook.github.io/react/tips/inline-styles.html

우리의 스타일은 브라우저 스타일과 동일하게 작동합니다. 스타일 캡슐화를위한 Shadow DOM만큼 깨끗한 솔루션은 아직 없지만 웹은 Shadow DOM없이 수년 동안 존재 해 왔으므로 브라우저의 기본 스타일 규칙을 사용하여 웹 사이트를 디자인 할 수 있습니다. :)

할 수있는 한 가지는 스타일 재설정 클래스를 정의하여 스타일을 기본값으로 재설정 한 다음 더 구체적인 선택기로 기본값을 재정의 할 수 있습니다.

또는 기본 스타일이 모두 포함 된 기본 인라인 스타일 개체를 만들고 모든 위치에 해당 개체를 가져 오며 특정 스타일을 적용하려면 해당 개체를 복사하고 Object.assign 사용하여 설정하려는 스타일을 재정의 할 수 있습니다.

그것은 내 2 센트입니다. cc @spicyj

추신 : 이것은 React의 버그 라기보다는 사용법 질문에 가깝기 때문에 계속해서 문제를 닫을 것입니다. 이 스레드에서 대화를 계속할 수 있습니다 (문제를 종결하면 대부분 개발 목적을 위해 레이더에서 제거됩니다). 이와 같은 질문에 이상적인 장소는 StackOverflow입니다.

일반적으로 구성 요소 이름으로 범위가 지정된 전역 적으로 고유 한 BEM 형식의 클래스 이름을 사용하는 것이 좋습니다.

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>
      </div>
    );
  }
});

그런 다음 CSS에서 단일 클래스 이름을 선호하는 하위 선택자를 사용하지 마십시오. 이는 스타일 분리 및 구성 요소 분리를 촉진하는 경향이 있습니다. 스타일을 분리하지 않고도 구성 요소를 쉽게 구성 할 수 있습니다.

수트는 훌륭한 노즈 툴링 (재 작업)과 적합성 검사기가있어 스타일이 번지지 않도록 자동 보호 기능을 제공하기 때문에 또 다른 훌륭한 옵션입니다.

이것은 흥미로운 솔루션처럼 보입니다 : https://github.com/Wildhoney/ReactShadow

또 다른 잠재적 솔루션은 http://projects.formidablelabs.com/radium/입니다.

가능한 경우 인라인 스타일을 선호하고 너무 복잡해지면 @spicyj가 권장하는 BEM과 같은 것을 사용합니다. 나는 또한 내 경험에서 React와 잘 어울리는 SuitCSS를 좋아합니다.