Wie lasse ich meinen Chip in der oberen rechten Ecke meiner App in React erscheinen?

Question

Ich erstelle gerade einen Chip in meiner lokalen Umgebung, der nur angezeigt wird, wenn die Staging-Umgebung unserer App verwendet wird. Ich kann diesen Chip nicht über die Material-Benutzeroberfläche in der oberen rechten Ecke der App anzeigen lassen (funktioniert auf der Desktop-Benutzeroberfläche). Wenn Sie weitere Informationen benötigen, kontaktieren Sie uns bitte! Hier ist meine .jsx-Datei:

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