I want to make check boxes like the given image,I mean circular check boxes having any text inside. Thanks in advance. Click here for the image

CodePudding user response：

Use MUI Avatar

const [isSelected , setIsSelected] = useState(false)
    


<Avatar sx={{ bgcolor: `${isSelected?'#1a73e8':'grey'}` }} onClick={() => setIsSelected(!isSelected)}>M</Avatar>

EDIT
For dynamic :

use array of object :

const [weekdays , setWeekDays] = useState([{
    day:'S',
    select:false
},
{
    day:'M',
    select:false
},
{
    day:'T',
    select:false
},
{
    day:'W',
    select:false
},
{
    day:'T',
    select:false
},
{
    day:'F',
    select:false
},
{
    day:'S',
    select:false
}])




 <Stack direction="row" spacing={2}>
      {weekdays.map((day, i) => (
        <Avatar
          sx={{
            bgcolor: `${day.select ? "#1a73e8" : "grey"}`,
            height: "25px",
            color: "white",
            width: "25px",
            fontSize: "12px"
          }}
          onClick={() => handleSelect(day , i)}
          alt="Remy Sharp"
        >
          {day.day}
        </Avatar>
      ))}
    </Stack>





const handleSelct = (ob, ind) => {
    const newArr = weekdays.map((obj, i) => {
      if (i === ind) {
        return { ...obj, select: !obj.select };
      }
      return obj;
    });

    setWeekdays(newArr);
  };

CodePudding user response：

In your case a will prefer using IconButton and useState to handle that

const [alarmcheck,setAlarmCheck]=useState(false)
const [cartcheck,setCartCheck]=useState(false)
<IconButton color="secondary" aria-label="alarm" sx={alarmcheck&& 
{backgroundColor:red}} onClick={ (prev)=>setsetAlarmCheck(!prev)}>
<AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart" onClick={ 
(prev)=>setsetCartCheck(!prev)}  sx={cartcheck&&{backgroundColor:green}}>
<AddShoppingCartIcon />
</IconButton>

Give it a try

CodePudding user response：

Resolved a similar issue like this by rendering the text content as a span and passing props to a styled-component based on the active index.

I was using MUI but could not figure out an approach to add text (similar to issue that you are facing). So instead I tried this approach.

NOTE: I am not using MUI. The only additional thing is that I am using styled-components. if you are using emotion/styled, that should be fine

Following is my implementation.Maybe this might help

import React from 'react';
import './style.css';
import styled from 'styled-components';

const weekdaysLabel = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const PayoutWeekDaysStyled = styled.span<any>`
width: 50px;
height: 50px;
border-radius: 30px;
font-size: 16px;
margin: 1rem;
text-align: center;
line-height: 50px;
color: ${(props: any) => (props.isActive ? '#fff' : '#000')};
background-color: ${(props: any) => (props.isActive ? '#0094CD' : '#f4f5f7')};
&:hover {
    background-color: ${(props: any) =>
      props.isActive ? '#0094CD' : '#f4f5f7'};
    cursor: pointer;
    color: ${(props: any) => (props.isActive ? '#fff' : '#000')};
}
`;

export default function App() {
  const [weekdays, setWeekdays] = React.useState([]);
  const handleClick = (item) => {
    if (weekdays.includes(item)) {
      const updatedWeekdays = weekdays.filter((day) => day !== item);
      setWeekdays(updatedWeekdays);
    } else {
      setWeekdays([...weekdays, item]);
    }
  };
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      {weekdaysLabel.map((item, index) => (
        <PayoutWeekDaysStyled
          key={index}
          isActive={weekdays.includes(item)}
          onClick={() => {
            handleClick(item);
          }}
        >
          {item}
        </PayoutWeekDaysStyled>
      ))}
    </div>
  );
}