Material-ui: How to style FormControlLabel based on checked input

[Duskfall]

• [x] 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 React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { FormControlLabel } from 'material-ui/Form';
import Checkbox from 'material-ui/Checkbox';

const styles = {
  checked: {
    '&, & + $label': {
      color: 'blue',
    },
  },
  label: {},
};

function CheckboxLabels(props) {
  const { classes } = props;

  return (
    <FormControlLabel
      classes={{
        label: classes.label,
      }}
      control={
        <Checkbox
          classes={{
            checked: classes.checked,
          }}
          value="checkedA"
        />
      }
      label="Secondary"
    />
  );
}

CheckboxLabels.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CheckboxLabels);

https://codesandbox.io/s/n9623jxyn4

• The CSS output:
  
• The visual output:
  

[hhimanshu]

Hey @oliviertassinari , How do I read this code?

const styles = {
  checked: {
    '&, & + $label': {
      color: 'blue',
    },
  },
  label: {},
};

I mean, I see that label is empty {}, however, in checked, we are using '&, & + $label', what does this mean? I am curious as to how this works

[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.

[hhimanshu]

Aha! this is what I was looking for. thank you @oliviertassinari for the clarification

[cyberCris]

If i'm using the withStyles override i would add label in FormControlLabel or Radio component?
i was trying to do as the example provided but got lost:

export const RedRadio = withStyles({
  root: {
    '&$checked': {
      color: colors.secondary,
    },
  },
  checked: {},
})(props => <Radio color="default" {...props} />);

export const CustomRadioLabel = withStyles({
  root: {
    color: '#757575',
    '&$checked': {
      '&, & + $label': {
        color: 'blue',
      },
    },
  },
  checked: {},
})(props => <FormControlLabel color="default" {...props} />);

how could i change the color of the FormControlLabel when checked with this workaround?

[dkulakov]

https://codesandbox.io/s/material-demo-672l1

Have the same question, but for FormControlLabel & Switch components, is it possible?