如何條件渲染 css inline

Question

基本上，我可以這樣做是因為，我有條件渲染 backgroundColor，但我還想渲染 position。我希望一些數據顯示在右側，其他數據顯示在左側。 我的問題是我不知道為什么我使用的 css 中的任何一個都不起作用： align, alignText, position工作一半float但它導致其他東西被毀壞了一半。

      {Data.map(i => (
        <StickyContainer
          key={i.id}
          className="container"
        
          style={{  alignText: "right", backgroundImage: `url("/zalety/${i.id}.jpg")`, 
        backgroundSize: "cover", 
    }}
        >
          <Sticky>
            {({ style }) => (
              <h1 style={{ ...style, background:   "#ae4a84", textAlign: "center" }} > {i.title} </h1>
            )}
          </Sticky>

          <h2 className="text-center" style={{width: "45%", backgroundColor:  (i.color ) ? `${i.color} ` : "white",
     
        
        }}>{i.content}</h2>
          
        </StickyContainer>

我嘗試使用諸如ExampleCard之類的組件並將其放在那里，但它導致類/功能組件出錯。

Answer 1

要有條件地添加內聯 css，因為這是您傳遞給樣式道具的 JS Object，您可以構造 object 以及 JS 擴展運算符，如下所示：

 ... <h2 className="text-center" style={{width: "45%", backgroundColor: (i.color )? `${i.color} `: "white",...(<condition for right alignment>)?{<CSS props for right alignment>}:{}}>{i.content}</h2>...

將每個 <> 替換為適當的數據。 上述更改將使您僅在條件為真時應用 CSS。

對於樣式和右側或左側的 position，我通常會做類似{position:'absolute', right: 0}操作，但這僅在您的StickyContainer或h2的直接父級具有relative的position ，否則，它會根據具有relative的position的最近父級進行自我調整。

Answer 2

對后代來說，想盡辦法改造后，正好我有一個千金難求的機會：

transform: (i.position == 'right') ? "translate(100%, 0)" : null,