Как мне стилизовать метку FormLabelControl в Material UI 1.x?
Я пытаюсь создать помеченный флажок в пользовательском интерфейсе материала (1.4.1), где я могу стилизовать текст метки (размер, цвет, вес и т. д.).
Вот что я придумал - что работает
import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
const LabeledCheckbox = props => {
const unstyled = props => (
<FormControlLabel
control = {
<Checkbox/>
}
label = {props.label}
classes = {{
label: props.classes.label
}}
/>
);
const Styled = withStyles({
label: props.labelStyle || {}
})(unstyled);
return (<Styled label = {props.label}/>);
};
export default LabeledCheckbox;
Использование:
<LabeledCheckbox label='So is this' labelStyle = {{ fontWeight: 'bold' }}/>
Тем не менее, такое чувство, что я действительно готовлю из этого еду. Конечно, есть более простой способ стилизовать текст FontControlLabel. Я чувствую, что у меня нет правильной ментальной модели того, как работает стиль пользовательского интерфейса материала.
Может кто подскажет, как написать этот код должен?
Да. Это ключевое требование. Код, который у меня был изначально, был статическим, и это было просто.
Чтобы прояснить, вам нужны полностью динамические стили, которые создаются на основе реквизита? Или просто вводить разные пользовательские стили каждый раз, когда вы используете компонент?
Если мой ответ не относится к вашему варианту использования, то есть если вам нужны динамические стили на основе реквизита, дайте мне знать, и я изменю его.
Привет, Люк. Спасибо за это. Мой вариант использования действительно требует динамических стилей, основанных на реквизитах. Итак, если у вас есть решение, более чистое, чем мое, хотелось бы его увидеть. Тем не менее, ответ ниже был интересным.
Ответы 1
Вы можете использовать классы API для внедрения пользовательских стилей каждый раз, когда вы используете компонент.
// Define custom default styles for checkbox label (optional)
const styles = {
label: {}
};
function LabeledCheckbox({ label, classes, ...CheckboxProps }) {
return (
<FormControlLabel
label = {label}
classes = {classes}
control = {<Checkbox {...CheckboxProps} />}
/>
);
}
export default withStyles(styles)(LabeledCheckbox);
Применение:
const styles = theme => ({
checkboxLabelA: {
fontWeight: 800,
},
checkboxLabelB: {
color: 'blue'
}
});
class MyForm extends React.Component {
render() {
const { classes } = this.props;
return (
<FormGroup>
<LabeledCheckBox
label = "Checkbox A"
classes = {{ label: classes.checkboxLabelA }}
/>
<LabeledCheckBox
label = "Checkbox B"
classes = {{ label: classes.checkboxLabelB }}
/>
</FormGroup>
);
}
}
export default withStyles(styles)(MyForm);
Вам нужно иметь возможность вводить разные стили каждый раз, когда вы используете компонент
LabeledCheckBox?