个人中心
gpt4 book ai didi

how to add tick icon instead of bullet icon in MUI radio button(如何在MUI单选按钮中添加勾号图标而不是项目符号图标)

转载 作者：bug小助手 更新时间：2023-10-24 18:44:05 25 4
gpt4 key购买 nike



i need to add CheckCircleSharpIcon from '@mui/icons-material/CheckCircleSharp' instead of bullet icon

我需要从‘@Mui/icons-Material/CheckCircleSharp’添加CheckCircleSharpIcon，而不是添加项目符号图标


{res?.map((radiooption, index) => (
<>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
className={classes.radioGroup}
value={value}
onChange={handleChange}
key={radiooption.secondaryRadioName}
>
<FormControlLabel className={classes.radioButton} value= 
{radiooption?.secondaryRadioName} control={<Radio />} label={<span 
dangerouslySetInnerHTML={{ __html: radiooption?.secondaryRadioName }}/>} 
/>
</RadioGroup>
</>
))}

更多回答
优秀答案推荐

=> You need to add checkedIcon property in the control this way:

=>您需要通过以下方式在控件中添加check kedIcon属性：


Sample Code: https://codesandbox.io/s/brave-einstein-cgqfrk?file=/Demo.js

示例代码：https://codesandbox.io/s/brave-einstein-cgqfrk?file=/Demo.js


Let me know, if you have any doubt. Thanks.

如果你有任何疑问，请告诉我。谢谢。



According to the API, you can utilize its checkedIcon prop, so the Radio component should looks like this

根据API，您可以利用它的check Icon属性，因此Radio组件应该如下所示


<Radio checkedIcon={<CheckCircleIcon />} />

Link to the checkedIcon props info: https://mui.com/material-ui/api/radio/#Radio-prop-checkedIcon

指向选中的图标道具信息的链接：https://mui.com/material-ui/api/radio/#Radio-prop-checkedIcon


CodeSandbox working demo (see line 20): https://codesandbox.io/s/bold-cloud-xhylt5?file=/Demo.tsx:718-761

代码沙盒工作演示(参见第20行)：https://codesandbox.io/s/bold-cloud-xhylt5?file=/Demo.tsx:718-761


更多回答

But how to add in RadioGroup or in FormControlLabel?

但是如何在RadioGroup或FormControlLabel中添加呢？

You need to add in FormControlLabel, this way: control={<Radio checkedIcon={<CheckCircleOutlineSharpIcon />} />}

您需要在FormControlLabel中添加，这样：Control={}/>}

But how to add in RadioGroup or in FormControlLabel?

但是如何在RadioGroup或FormControlLabel中添加呢？

@ArunKrishna According to the RadioGroup API and FormControlLabel API, no option prop is provided. Meaning you need to use Radio component to do it the MUI native way. Why would you like to do it in other places btw?

@ArunKrishna根据RadioGroup接口和FormControlLabel接口，没有提供选项道具。这意味着您需要使用Radio Component以MUI原生方式完成此操作。顺便说一句，你为什么想在其他地方做呢？

Sorry got it, Thanks for the help

对不起，明白了，谢谢你的帮助

25 4 0
文章推荐： Axios get access to response header fields(Axios可以访问响应头字段)
文章推荐： filament select with two columns(带两个柱子的细丝选择)
文章推荐： Why is Tailwind not installing correctly in my Vercel deployment? (Vite/Sveltekit)(为什么在我的Vercel部署中无法正确安装TailWind？(VITE/Sveltekit))
文章推荐： How to objcopy a bin file as part of a Zig build script(如何将bin文件复制为Zig构建脚本的一部分)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com