need help in highlighting an div when it clicked

hey folks this is my jsx

<Box sx={{display: 'flex', border: '0px solid #313442', borderBottomWidth: '1px'}}>
  <Box className={styles.pluginButtons}>All Plugins</Box>
  <Box className={styles.pluginButtons}>Popular Plugins</Box>
  <Box className={styles.pluginButtons}>Server Management</Box>
  <Box className={styles.pluginButtons}>Utilities</Box>
  <Box className={styles.pluginButtons}>Social Alerts</Box>
  <Box className={styles.pluginButtons}>Engagement & Fun</Box>
</Box>

<Box sx={{display: 'flex', border: '0px solid #313442', borderBottomWidth: '1px'}}>
  <Box className={styles.pluginButtons}>All Plugins</Box>
  <Box className={styles.pluginButtons}>Popular Plugins</Box>
  <Box className={styles.pluginButtons}>Server Management</Box>
  <Box className={styles.pluginButtons}>Utilities</Box>
  <Box className={styles.pluginButtons}>Social Alerts</Box>
  <Box className={styles.pluginButtons}>Engagement & Fun</Box>
</Box>

and here is the css

.pluginButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arvo, serif;
    font-size: 1.6rem;
    cursor: pointer;
    color: #656a83;
    white-space: nowrap;
    padding: 2rem;
}

.pluginButtons:hover {
    color: white;
}

.pluginButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arvo, serif;
    font-size: 1.6rem;
    cursor: pointer;
    color: #656a83;
    white-space: nowrap;
    padding: 2rem;
}

.pluginButtons:hover {
    color: white;
}

now I want that when one of the div is clicked the color of text change for the clicked div like in the attached photo

2 Replies

Jochem•2y ago

no clue how that works in JSX, but you'll have to add a class to the currently active button. Are those navigation links, or filters? In another templating system, I'd add a conditional class comparing the application state (so either the active filter or the currently active route) to the value for that link, and if true, add an active class then in css you can have .pluginButtons.active { color: white; }

b1mind•2y ago

https://benmyers.dev/blog/semantic-selectors/ SideNote: you can use aria-current="page" then style with a attribute selector and have a active class for free.

Gaming

Programming

need help in highlighting an div when it clicked