[Checkbox] How to style FormControlLabel based on checked input?

• I have searched the issues of this repository and believe that this is not a duplicate.

I would like to ask you how is it possible to add a class or styles to a FormControlLabel based on the value of the component passed.

 <FormControlLabel value={answer.text} control={<Radio color="primary" classes={{ checked: 'test' }}/>} label={answer.text} classes={{ checked: 'test' }}/>)}

Radio gets ‘test’ class but I want for the FormControlLabel to be able to get this class to style the whole row. So I need to expose the radio button checked property. I could do a new component and add it to the state but isn’t there a more elegant way? Example that I don’t like:

class WrapperLabel extends React.Component{
    setControlValue(value){
        this.setState({
           value
        })
    }

    render(){
        return(
            <FormControlLabel className={ `${this.state.value === answer.text ? 'test' : ''}`}}/>} value={answer.text} control={<Radio color="primary" className={ checked: 'test' }} onChange={(val) => this.setControlValue(value)}/>} label={answer.text} />)}
        )
    }
}

Please forgive any code errors I just wrote it without testing it, just wanted to express the idea

Tech	Version
Material-UI	1.0.0-beta.38
React	16.2.0

[oliviertassinari]

Example that I don’t like:

@Duskfall From my perspective, your example is fine 👍. However, there is an alternative that doesn’t require to complexify Material-UI core: the CSS direct sibling selector .checked + .label.

import * as React from "react";
import { Checkbox, FormControlLabel } from "@material-ui/core";

export default function CheckboxLabels() {
  return (
    <FormControlLabel
      control={
        <Checkbox
          value="checkedA"
          sx={{
            "&.Mui-checked": {
              "&, & + .MuiFormControlLabel-label": {
                color: "red"
              }
            }
          }}
        />
      }
      label="Secondary"
    />
  );
}

https://codesandbox.io/s/n9623jxyn4?file=/demo.tsx:0-463

It uses the checkbox to apply the red color when checked and then target the label. This a based on a standard CSS selector logic.

[oliviertassinari]

@hhimanshu The code converts to the following CSS (with random class names):

.checked, .checked + .label {
  color: blue;
}

This resource can help: https://material-ui.com/customization/overrides/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet.