如何在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