Comment faire apparaître ma puce dans le coin supérieur droit de mon application dans React ?
P粉819937486
P粉819937486 2024-02-17 15:51:19
0
2
396

Je crée actuellement une puce dans mon environnement local qui n'apparaît que lors de l'utilisation de l'environnement de test de notre application. Je n'arrive pas à faire apparaître cette puce de l'interface utilisateur matérielle dans le coin supérieur droit de l'application (fonctionne sur l'interface utilisateur du bureau). Si vous avez besoin de plus d’informations, contactez-nous ! Voici mon fichier .jsx :

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

répondre à tous(2)
P粉258788831

Si je comprends bien, vous devez concevoir la puce pour avoir des positions fixes, puis attribuer le haut : 0 et la droite : 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

Vous pouvez également le faire directement dans le fichier jsx :

  • Si tu veux déménager div 元素,请将 style 属性添加到 div style={{position: 'fixed', top: 0, right: 0}}
  • Si tu veux juste bouger Chip,则将 sx 属性添加到 Chip sx={{position: 'fixed', top: 0, right: 0}}
P粉323050780

Voici la position:fixed solution :

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

const StagingChip = () => (
      
) export default StagingChip
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal