Question

我创建了Carousel组件，它返回了一个Carousel框的集合，在返回它之前，我将style属性应用于每个返回的div，但是该样式无效。我应该怎么做才能解决它？

如果我在主div内创建了另一个div并将外部div的内容包装到内部div中，并将style属性应用于内部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类似。

样式元素必须与camelCase一起编写。
样式元素的值必须用引号引起来。

我不知道它是否可以与您的代码一起使用，但是无论如何尝试一下，这是调用内联样式的正确方法：

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

或者您可以尝试将您的样式包装到这样的反引号中：

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

React Component的内联样式不起作用

1 个答案: