How do I make my chip appear in the top right corner of my app in React?
P粉819937486
P粉819937486 2024-02-17 15:51:19
0
2
417

I'm currently creating a chip in my local environment that only appears when using our application's staging environment. I can't get this chip from the material UI to show up in the top right corner of the app (works on desktop ui). If you need more information, please contact us! Here is my .jsx file:

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

reply all(2)
P粉258788831

As I understand it, you need to design the chip to have fixed positions and then assign top: 0 and right: 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

You can also do this directly in the jsx file:

  • If you want to move the div element, add the style attribute to div style={{position: 'fixed', top: 0 , right: 0}}
  • If you only want to move the Chip, add the sx attribute to the Chip sx={{position: 'fixed', top: 0, right: 0}}
P粉323050780

This is position:fixed Solution:

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

const StagingChip = () => (
      
) export default StagingChip
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template