我正在使用 Material UI 的 Switch 组件，我想在其中添加文本。我还需要使它的形状呈方形。
如何在 Switch 组件中添加文本。它应该在选择时打开，默认时关闭。我正在以 reactjs 形式在 Formcontrol 中使用 Material UI 的 Switch。
<FormControlLabel
label="Private ? "
labelPlacement="start"
control={
<Switch
checked={this.state.checked}
onChange={this.handleChange}
color='primary'
/>
}
/>
以下是如何根据 Switch 的状态以及方形 Switch 的样式更改文本的示例：
import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";
const styles = {
// use "icon" instead of "thumb" in v3
thumb: {
borderRadius: 0
}
};
class SwitchLabels extends React.Component {
state = {
checked: true
};
handleChange = event => {
this.setState({ checked: event.target.checked });
};
render() {
return (
<FormControlLabel
control={
<Switch
classes={this.props.classes}
checked={this.state.checked}
onChange={this.handleChange}
value="checked"
color="primary"
/>
}
labelPlacement="start"
label={this.state.checked ? "On" : "Off"}
/>
);
}
}
export default withStyles(styles)(SwitchLabels);
