我正在使用 Material UI 的 Switch 组件,我想在其中添加文本。我还需要把它做成正方形。
如何在 Switch 组件中添加文本。它应该在选择时打开,在默认时关闭。我在 Formcontrol 中以 reactjs 形式使用 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);
关于reactjs - 将文本添加到 Switch formcontrol 并使用 material ui 在 toggle 中更改它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56128013/