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

Question

我目前正在本地環境中建立一個僅在使用我們應用程式的暫存環境時出現的晶片。我無法從材質 UI 中獲取此晶片，使其顯示在應用程式的右上角（在桌面 ui 上工作）。如果您需要更多信息，請與我們聯繫！這是我的 .jsx 檔案：

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

const StagingChip = () => (
    <>
      <div>
        <Chip label="Staging" color='info'/>
      </div>
    </>
  )

export default StagingChip

Answer 1

據我了解，您需要將晶片設計為具有固定位置，然後分配 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}}

#

Answer 2

這是 position:fixed 解決方案：

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

const StagingChip = () => (
      

        
      
  )

export default StagingChip