Material-ui: Custom RadioButton is getting ignored and style are not applied

[Maxwell2022]

I've searched in the issue tracker but could not find anything about this. What I'm trying to do is to have a generic RadioButton across all of my application so I've created this component to replace the RadioButton one:

import React from 'react'
import { RadioButton } from 'material-ui/RadioButton'
import RadioButtonChecked from 'material-ui/svg-icons/toggle/radio-button-checked'
import RadioButtonUnchecked from 'material-ui/svg-icons/toggle/radio-button-unchecked'


const CustomRadioButton = (props) => (
  <RadioButton
    {...props}
    iconStyle={{ width: '18px', height: '18px', marginRight: '10px', paddingTop: '1px' }}
    checkedIcon={<RadioButtonChecked style={{ fill: '#35A2D0' }} />}
    uncheckedIcon={<RadioButtonUnchecked style={{ fill: '#7B7D7F' }} />}
    labelStyle={{ color: '#7B7D7F', fontSize: '14px' }}
  />
)

export default CustomRadioButton

import { RadioButtonGroup } from 'material-ui/RadioButton'
import CustomRadioButton from 'components/MaterialUI/RadioButton'

...

  <RadioButtonGroup name="gender" labelPosition="right" defaultSelected="male">
    <CustomRadioButton value="male" label="Male" />
    <CustomRadioButton value="female" label="Female" />
  </RadioButtonGroup>

Expected Behavior

I'm expecting the style to be applied

Current Behavior

The style is not applied

Your Environment

react@^16
material-ui@^0.19.4

[Maxwell2022]

However inline style in my component is working fine, but it's not possible to maintain like this:

<RadioButtonGroup name="gender" labelPosition="right" defaultSelected="male">
  <RadioButton
    iconStyle={{ width: '22px', height: '22px', marginRight: '10px', paddingTop: '1px' }}
    checkedIcon={<RadioButtonChecked style={{ fill: '#35A2D0' }} />}
    uncheckedIcon={<RadioButtonUnchecked style={{ fill: '#7B7D7F' }} />}
    labelStyle={{ color: '#7B7D7F', fontSize: '16px' }}
    style={{ display: 'inline-block', width: '50%' }}
    value="male"
    label="Male"
  />
  <RadioButton
    iconStyle={{ width: '22px', height: '22px', marginRight: '10px', paddingTop: '1px' }}
    checkedIcon={<RadioButtonChecked style={{ fill: '#35A2D0' }} />}
    uncheckedIcon={<RadioButtonUnchecked style={{ fill: '#7B7D7F' }} />}
    labelStyle={{ color: '#7B7D7F', fontSize: '16px', lineHeight: '22px' }}
    style={{ display: 'inline-block', width: '50%' }}
    value="female"
    label="Female"
  />
</RadioButtonGroup>

[oliviertassinari]

This sounds like a React related question.
Please submit support requests and questions to StackOverflow using the tag material-ui. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[oliviertassinari]

Oh no, I'm wrong. It's a Material-UI issue. It was fixed on the v1-beta branch.

[oliviertassinari]

This issue comes from this pattern: https://github.com/callemall/material-ui/commit/fc807015bb#diff-bb1df988fb0a9245d2fc5cd883d1eaaaR24, we should have been cloning the children.

[Maxwell2022]

If this is not getting fix in the current stable version, it would be great to add this "known issue" in the documentation so that everyone is across it

[oliviertassinari]

@Maxwell2022 It depends on what you mean by "stable". v0.x is more stable from an API perspective, while v1.x is more stable from a quality perspective.
Thanks for opening this issue. It's a self-documentation.

[ppprevost]

same problem for me. I try to install the v1 beta as a dependancy of my project but still the same problem :( :( :(