Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import { styled } from '@mui/material/styles';
|
|
import PropTypes from 'prop-types';
|
|
import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import Radio from '@mui/material/Radio';
|
|
|
|
const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
|
|
({ theme }) => ({
|
|
variants: [
|
|
{
|
|
props: { checked: true },
|
|
style: {
|
|
'.MuiFormControlLabel-label': {
|
|
color: theme.palette.primary.main,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}),
|
|
);
|
|
|
|
function MyFormControlLabel(props) {
|
|
const radioGroup = useRadioGroup();
|
|
|
|
let checked = false;
|
|
|
|
if (radioGroup) {
|
|
checked = radioGroup.value === props.value;
|
|
}
|
|
|
|
return <StyledFormControlLabel checked={checked} {...props} />;
|
|
}
|
|
|
|
MyFormControlLabel.propTypes = {
|
|
/**
|
|
* The value of the component.
|
|
*/
|
|
value: PropTypes.any,
|
|
};
|
|
|
|
export default function UseRadioGroup() {
|
|
return (
|
|
<RadioGroup name="use-radio-group" defaultValue="first">
|
|
<MyFormControlLabel value="first" label="First" control={<Radio />} />
|
|
<MyFormControlLabel value="second" label="Second" control={<Radio />} />
|
|
</RadioGroup>
|
|
);
|
|
}
|