How do I make my chip appear in the top right corner of my app in React?

Question

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

Answer 1

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}}

Answer 2

This is position:fixed Solution:

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

const StagingChip = () => (
      

        
      
  )

export default StagingChip