Checkbox label full width - css

Question

I have a <Checkbox> component wrapped in a <FormControlLabel>. They are placed inside a container like this:
<FormGroup row={true} key={option.id}>
<FormControlLabel
className="ContractOfferOptionsSelector__option"
key={option.id}
control={
<Checkbox checked={option.selected} onChange={this.handleChange} value={String(option.id)} />
}
label={this.renderLabel(option)}
/>
</FormGroup>
private renderLabel(option: ISelectableOption) {
return (
<div className="ContractOfferOptionsSelector__option">
<span className="ContractOfferOptionsSelector__option__title">
<span className="ContractOfferOptionsSelector__option__title__abbreviation">{option.abbreviation}</span>
<span className="ContractOfferOptionsSelector__option__title__description">{option.description}</span>
</span>
<span className="ContractOfferOptionsSelector__option__price">
{`${formatCurrency(option.price.priceInclVat)} ${t(option.price.currency)}`}
</span>
</div>
)
}
The label renders as a <span> and 'tightly' wraps the content (so it doesn't take full width of the container). I have put multiple elements inside the label (price, title...) and want to make the label take full width, so that the elements space out across full width.
I tried .ContractOfferOptionsSelector__option {width: 100%;} but it doesn't work because the parent is also a <span>? with a dynamically generated class name...
How can I control the width of the label in material-ui?

Answer 1

<span> has a default inline display property.
Inline elements:
- Respect left & right margins and padding, but not top and bottom
- Cannot have a width and height set
Try to set display: inline-block to your <span> and add position: relative to the FormGroup container.

Answer 2

Solution
(tested with MUI v4)
import React from "react";
import { Checkbox, FormControl, FormControlLabel, FormGroup, makeStyles, TextField } from "#material-ui/core";
export default function App() {
const classes = useStyles();
return (
<FormControl fullWidth>
<FormGroup>
<FormControlLabel
classes={{
label: classes.fullWidth
}}
control={<Checkbox />}
label={<TextField label="Full width" defaultValue="Working" variant="outlined" fullWidth />}
/>
</FormGroup>
</FormControl>
);
}
const useStyles = makeStyles((theme) => ({
fullWidth: {
width: "100%",
},
}));
Full code on codesandbox.
Explanation
As you pointed out in your question, both the label and the control components become span elements inside FormControlLabel, with some default style as well.
To force the label to cover full width, you need to:
Toggle on the fullWidth prop for the FormControl;
Override the label CSS class in FormControlLabel to set its width: 100%