인라인 스타일이 작동하지 않습니다. ReactJS

Question

React를 배우려고합니다. 구성 요소 내부의 반환 스타일을 사용할 수없는 이유는 무엇입니까?

오류 : 나는이 또한 시도

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Home .

<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);"> 

:이 구문

<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}> 

또는

<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}> 

어떤 도움을 크게 감상 할 수있다. 다른 사람들은 스타일을 말하기 위해 스타일을 바꾸었지만 작동하지는 않는 것으로 보입니다.

Answer 1

DOC에서. 예를 들어

:

padding-top  --->  paddingTop 

padding-left  --->  paddingLeft 

margin-right  --->  marginRight 

... 

How to specify the inline style?

우리는 뜻이 키 - 값 쌍의 형태로 모든 값을 포함하는 스타일 속성에 개체를 전달해야합니다.

<div 
    style={{ 
     backgroundImage: 'url(../images/WinterCalling_2016.jpg)', 
     marginTop: 20}} 
> 

업데이트 :

우리는 다음과 같이 URL을 내부에 변수를 전달하는 template literals를 사용할 수 있습니다!

<div style={{backgroundImage: `url(${image1})`}}> 

Answer 2

카멜 케이스 협약에 따라 반응하여 background-image을 backgroundImage으로 변경해야합니다.

자세한 내용은 here을 참조하십시오.

Answer 3

배경 이미지를 따옴표로 묶어 보셨습니까?

즉

이 나를 위해 작동하는 것 같다

<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div> 

(적어도, 배경 색 속성을 테스트 할 때, 나는 배경 - 이미지와 테스트하기 위해 손에 이미지가없는)

Answer 4

style 속성을 사용하려면 JavaScript 사전 개체를 제공하십시오. 그러나 background-image의 스타일 키는 backgroundImage입니다. 사용 backgroundImage

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

그래서 대신 background-image :

<div 
    className="single_slide" 
    style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}} 
> 

Answer 5

또는 당신이 사용할 수있는 '중요한이 같이

'with this ... like background-color : red! important " 참고 : js를 바닥 글로 부르십시오. js가 반응하기도하기 때문에 먼저 header.so에서 호출하면 바닥 글에 'js'라고 부릅니다.

<div class="yourclass" style="background-color:red;" >your div</div> 

style = "background-color : red;"