Bagaimanakah saya boleh membuat cip saya muncul di penjuru kanan sebelah atas apl saya dalam React?

Question

Saya sedang mencipta cip dalam persekitaran tempatan saya yang hanya muncul apabila menggunakan persekitaran pementasan apl kami. Saya tidak boleh mendapatkan cip ini daripada UI bahan untuk dipaparkan di penjuru kanan sebelah atas apl (berfungsi pada ui desktop). Jika anda memerlukan maklumat lanjut, sila hubungi kami! Berikut ialah fail .jsx saya:

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

Seperti yang saya faham, anda perlu mereka bentuk cip untuk mempunyai kedudukan tetap dan kemudian menetapkan atas: 0 dan kanan: 0

https://css-tricks.com/almanac/properties/p/location/

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
  

Anda juga boleh melakukan ini terus dalam fail jsx:

• Kalau nak pindah div 元素，请将 style 属性添加到 div style={{position: 'fixed', top: 0, right: 0}}
• Kalau baru nak pindah Chip，则将 sx 属性添加到 Chip sx={{position: 'fixed', top: 0, right: 0}}

Answer 2

Ini adalah position:fixed penyelesaiannya:

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

const StagingChip = () => (
      

        
      
  )

export default StagingChip