如何在我的反應滑塊中設置顯示彈性？

Question

這是我的滑塊

<Slider {...settings}>
  <div style={{ 'display': 'flex !important' }}>
    <ArrowsToolComponent key={name} color={color} />
    <ZoomTool key={name} color={color} />
  </div>
  <div>
    <GridToolComponent key={name} color={color} />
    <CropToolComponent disabled={disabled} key={name} color={color} />
  </div>
  <div>
    <FlipTool disabled={disabled} key={name} color={color} />
    <PriorityToolComponent disabled={disabled} key={name} color={color} />
  </div>
  <div>
    <CopyFileToolComponent disabled={false} key={name} color={color} />
    <CancelFileToolComponent disabled={disabled} key={name} color={color} />
  </div>
  <div>
    <InsertTextBox key={name} color={color} />
    <InsertImageBox key={name} color={color} />
  </div>
</Slider>

如何將 display: flex 設置為滑塊中的 div？ react-slick 文檔中沒有關於它的信息。 默認情況下它總是內聯塊。

Answer 1

在使用 React 編寫組件時，我們可以接受除所需之外的不同 props，並在我們的組件中解構它們。 看來這個庫確實支持傳遞style props 。

如果沒有默認道具，您將能夠使用 React style屬性，例如：

<Slider {...settings} style={{ display: 'flex' }}>
   { /* rest of the code */}
</Slider>

如果組件有defaultProps ，React 會使用它們渲染組件，除非父級覆蓋它。 所以你也可以用你需要的樣式創建一個 Parent <div> ，它可以是：

<div style={{ display: 'flex' }}>
 <Slider {...settings}>
   { /* rest of the code */}
 </Slider>
</div>

• React.js 關於渲染元素的文檔。

Answer 2

<Slider {...settings} style={{ display: "flex" }}>