如何在 Material Ui 的复选框内添加字母或文本？

Question

我想制作像给定图像一样的复选框，我的意思是里面有任何文本的圆形复选框。 提前致谢。 点击这里查看图片

Answer 1

使用 MUI头像

const [isSelected , setIsSelected] = useState(false)
    


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

Answer 2

在您的情况下，a 会更喜欢使用 IconButton 和 useState 来处理它

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>

试试看

Answer 3

通过将文本内容呈现为跨度并将道具传递给基于活动索引的样式组件，解决了类似的问题。

我正在使用 MUI，但无法找到添加文本的方法（类似于您面临的问题）。 所以我尝试了这种方法。

注意：我没有使用 MUI。 唯一额外的事情是我正在使用样式组件。 如果您使用的是emotion/styled ，那应该没问题

以下是我的实现。也许这可能会有所帮助

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