material-ui
material-ui copied to clipboard
[joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color
Steps to reproduce
Link to live example: (required)
Steps:
- Create a radio group that contains radios with
disableIconset andslotPropsthat change the background color of theactioncomponent when the radio is checked. e.g. This example from the docs - See that it's possible to select the different options, the background color changes, and the label text is still visible.
- Remove the
disableIconprop and pass acheckedIconand/oruncheckedIconprop with a random icon from@mui/icons-material. - See that the background color of a selected radio hides the icon and label.
Current behavior
The label and icon are hidden when the option is selected.
https://github.com/mui/material-ui/assets/1231200/59b99689-359f-4921-9963-18de4f04b017
Expected behavior
The label and icon should remain visible when the option is selected.
Context
Create a radio button group with options that change background color when selected and include icons.
Your environment
npx @mui/envinfo
System:
OS: macOS 14.4.1
Binaries:
Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: 9.0.1 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 124.0.6367.62
Edge: Not Found
Safari: 17.4.1
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/joy: 5.0.0-beta.36 => 5.0.0-beta.36
@mui/material: ^5.15.15 => 5.15.15
@types/react: ^18.2.79 => 18.2.79
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.4.5 => 5.4.5
Tested in Chrome, Safari, and Firefox
Search keywords: radio background color icon
Just to note, I'm trying to create an uncontrolled component so I am unable (as far as I cant tell) to do anything programmatically based on the inputs value (unless I guess I use a ref?)
Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI