Wie lasse ich meinen Chip in der oberen rechten Ecke meiner App in React erscheinen?
P粉819937486
P粉819937486 2024-02-17 15:51:19
0
2
456

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

P粉819937486
P粉819937486

Antworte allen(2)
P粉258788831

据我了解,您需要将芯片设计为具有固定位置,然后分配 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

这是 position:fixed 解决方案:

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

const StagingChip = () => (
      
) export default StagingChip
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage