React 組件的內聯樣式不起作用

Question

我創建了 Carousel 組件，它返回輪播框的集合，在返回它之前我將樣式屬性應用於每個返回的 div，但樣式不起作用。 我應該怎么做才能解決它？

如果我在主 div 中創建了另一個 div，並將外部 div 的內容包裝到內部 div 中，並將樣式屬性應用於內部 div 而不是外部 div，那么一切正常。

const Carousel = (props)=>{
 return (
         <Slider {...settings}>
           { props.sectionDetails?
            props.sectionDetails.map(
             (TypeBox)=>{
               return (<div key={TypeBox.id} style={{background: 
                        TypeBox.background_color}}>
                        <h3>{TypeBox.title}</h3>
                        <p>{TypeBox.description}</p>
                      </div>
                      );
             }):"" }
        </Slider>
        );
}

我只想要一個 div 和樣式應該適用於此，我不想創建另一個嵌套的 div。

Answer 1

React中的內聯樣式與JSON類似。

1. 樣式元素必須與camelCase一起編寫。
2. 樣式元素的值必須用引號引起來。

我不知道它將與您的代碼一起使用，但是無論如何都可以嘗試一下，這是調用內聯樣式的正確方法：

style={{backgroundColor: "TypeBox.background_color"}}

或者，您可以嘗試將您的樣式包裝成反引號，如下所示：

style={{backgroundColor: `${TypeBox.background_color}`}}

Answer 2

正確的解決方案是style={{ backgroundColor: TypeBox.background_color }} 。