reactj의 인라인 스타일에 벤더 프리픽스를 적용하려면 어떻게 해야 하나요?

reactj의 인라인 스타일에 벤더 프리픽스를 적용하려면 어떻게 해야 하나요?

React 내의 CSS 속성은 벤더 프리픽스와 함께 자동으로 추가되지 않습니다.

예를 들어 다음과 같습니다.

<div style={{
    transform: 'rotate(90deg)'
}}>Hello World</div>

사파리에서는 로테이션이 적용되지 않습니다.

어떻게 하면 완성할 수 있을까요?

React는 벤더 프리픽스를 자동으로 적용하지 않습니다.

벤더 프레픽스를 추가하려면 다음 패턴에 따라 벤더 프레픽스의 이름을 지정하고 다른 프로퍼로 추가합니다.

-vendor-specific-prop: 'value'

다음과 같이 됩니다.

VendorSpecificProp: 'value'

따라서 질문의 예에서는 다음과 같이 해야 합니다.

<div style={{
    transform: 'rotate(90deg)',
    WebkitTransform: 'rotate(90deg)'
}}>Hello World</div>

값 접두사는 이 방법으로 수행할 수 없습니다.예를 들어 이 CSS는 다음과 같습니다.

background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);

오브젝트는 중복키를 가질 수 없기 때문에 브라우저가 지원하는 키를 알아야 합니다.

다른 방법으로는 스타일링 도구 체인에 라듐을 사용하는 것이 있습니다.그 기능 중 하나는 자동 벤더 프리픽스입니다.

라듐의 배경 예는 다음과 같습니다.

var styles = {
  thing: {
    background: [
      'linear-gradient(90deg, black, #111)',

      // fallback
      'black',
    ]
  }
};

저도 같은 문제에 직면해 있었습니다.리액션 프리픽스 라이브러리는 제가 원하는 기능을 하지 못했습니다.그래서 제가 직접 만들었어요.

반응 촉진제

아직 젊지만(오늘 아침에 지었습니다) 유지하겠습니다.도움이 됐으면 좋겠네요.

react.js에 대한 경험은 없지만 Lea Verou에 있는 이 js 라이브러리를 보세요.DOM에서 직접 스타일을 접두사로 합니다.

http://leaverou.github.io/prefixfree/

다음과 같은 것을 사용할 수 있습니다.

https://github.com/cgarvis/react-vendor-prefix

스타일 오브젝트를 자동으로 벤더에 등록합니다.

언급URL : https://stackoverflow.com/questions/32100495/how-do-i-apply-vendor-prefixes-to-inline-styles-in-reactjs