个人中心
gpt4 book ai didi

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

转载 作者：bug小助手 更新时间：2023-10-24 18:59:12 30 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

抱歉，我知道了，谢谢你的帮助

30 4 0
文章推荐： How do I convert text value from a textbox to an integer?(如何将文本框中的文本值转换为整数？)
文章推荐： What reasons cause a class C, which inherits from class A and has only one member variable of type B, not to be a standard-layout class?(是什么原因导致从A类继承并且只有一个B类型的成员变量的C类不是标准布局类？)
文章推荐： how to overcome bottomnavigationbar overlaps in flutter(如何克服颤振中的海底导航条重叠)
文章推荐： In React Native is there a way to allow touch to fall through the transparent part of images?(在《反应原住民》中，有没有一种方法可以让触觉穿过图像的透明部分？)
bug小助手
个人简介

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

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