如何在React中使得我的晶片出現在應用程式的右上角？

Question

我目前正在本地環境中創建一個僅在使用我們應用程式的暫存環境時出現的晶片。我無法從材質UI中獲取此晶片，使其顯示在應用程式的右上角（在桌面ui上工作）。如果您需要更多信息，請與我們聯繫！這是我的.jsx檔：importReactfrom'react'importChipfrom'@material-ui/core/Chip'constStagingChip=()=>(<><

P粉258788831 · Answer

據我了解，您需要將晶片設計為具有固定位置，然後分配 top: 0 和 right: 0

https://css-tricks.com/almanac/properties/p/位置/

main {
  width: 100vw;
  height: 100vh;
}

.mock_chip{
  height: 100px;
  width: 100px;
  background-color: blue;
  color: white;
}

.in_corner{
  /* you need to add position, top and right to the element that should be in corner */
  position: fixed;
  top: 0;
  right: 0;
 }


  
    chip mock

您也可以直接在 jsx 檔案中執行此操作：

如果要移動div 元素，請將style 屬性加入到div style={{position: 'fixed', top: 0 , right: 0}}
#如果您只想移動Chip，則將sx 屬性加入到Chip sx={{position: 'fixed', top: 0, right: 0}}

#

P粉323050780 · Answer

這是 position:fixed 解決方案：

import React from 'react'
import Chip from '@material-ui/core/Chip'

const StagingChip = () => (
      
        
      
  )

export default StagingChip