search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.52k stars 31.89k forks source link

[joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color #42017

Open rsslldnphy opened 2 months ago

rsslldnphy commented 2 months ago

Steps to reproduce

Link to live example: (required)

Steps:

  1. Create a radio group that contains radios with disableIcon set and slotProps that change the background color of the action component when the radio is checked. e.g. This example from the docs
  2. See that it's possible to select the different options, the background color changes, and the label text is still visible.
  3. Remove the disableIcon prop and pass a checkedIcon and/or uncheckedIcon prop with a random icon from @mui/icons-material.
  4. 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

rsslldnphy commented 2 months ago

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?)