Clicking on a React component will result in highlighting

Question

Clicking on a React component will result in highlighting

What's the best way to display the selected item after a user clicks on it?

   <Box py={2}>
      <Grid container width="330px">
        <Grid container direction="column" item xs align="left">
          <Grid item>
            <Typography
              variant="h6"
              className="locationTitle"
              display="block"
            >
              {' '}
              {location.name}{' '}
            </Typography>
          </Grid>
        </Grid>
      </Grid>
      <Typography variant="body" display="block">
        {' '}
        {location.address.street1}
      </Typography>
    </Box>

css

.css-1yjo05o:hover{
  background-color: lightgray;
}

I managed to get the hover effect working, but I ran into issues with the :focus and :target pseudo-classes.

https://i.sstatic.net/RxdcM.png

css reactjs material-ui

Answer 1

Answer №1

To maintain consistent styling, avoid directly styling the hashes created by the Mui styling engine as they are not static. Instead, opt for an onClick listener that can toggle a className (if CSS is being used) or an SX prop (if @mui/material is being used).

const [highlight, setHighlight] = useState(false)

<Box 
  py={2} 
  onClick={() => setHighlight(!highlight)} 
  sx={{ bgcolor: highlight ? 'lightgrey' : 'unset' }}
>

It's important to note that this approach may result in multiple boxes being highlighted simultaneously. If the goal is to highlight only one box at a time, the state should be managed in the parent component and the child's index should be used to toggle the highlight. View a demo here.

Answer 2

To maintain consistent styling, avoid directly styling the hashes created by the Mui styling engine as they are not static. Instead, opt for an onClick listener that can toggle a className (if CSS is being used) or an SX prop (if @mui/material is being used).

const [highlight, setHighlight] = useState(false)

<Box 
  py={2} 
  onClick={() => setHighlight(!highlight)} 
  sx={{ bgcolor: highlight ? 'lightgrey' : 'unset' }}
>

It's important to note that this approach may result in multiple boxes being highlighted simultaneously. If the goal is to highlight only one box at a time, the state should be managed in the parent component and the child's index should be used to toggle the highlight. View a demo here.

Clicking on a React component will result in highlighting

Answer №1

Similar questions

changing size when hovered over with the mouse is not consistent between entering and exiting

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

Experiencing difficulty sending Redux state to child component

Monitor changes in the visible price range in lightweight-chart

A step-by-step guide to uploading MP3 files to GitHub and streaming them from a web browser

Send the Children prop to the React Memo component

Encountering a roadblock when attempting to redirect to a different page within a

Achieve text length that does not exceed the specified limit dynamically

I am working with three columns and I am looking to keep the center column fixed in place while scrolling

Exporting Next.js sitemap statically

Replace background image using styled-components

Importing CSS conditionally in NextJS allows for better organization

The transparency of my navbar renders it elegant, yet I desire to imbue the toggle background with a vibrant hue

Tips on incorporating CKEditor4 wiris MathML formulas into react JS

How many logical lines of code are in the Ubuntu operating system?

How to Align Video Alongside Image in HTML without Using CSS

The specified version for scheduler@^0.13.4 could not be located

Error: Attempting to access the 'map' property of an undefined variable, cart

Tips for validating material-ui-phone-number using Yup