[英]Styling of disabled and enabled button
I have one button (from material ui) which is greyed out if the date is not set.我有一个按钮(来自材料 ui),如果未设置日期,该按钮将显示为灰色。 If you set a date it should be clickable.
如果您设置日期,它应该是可点击的。 I want to style the button for those cases.
我想为这些情况设置按钮样式。
This is the button:这是按钮:
<Button style={{
marginTop: 10
}} disabled={this.props.date ? false : true} onClick={this.sendRequest} variant="contained" color="primary">Send Request</Button>
Those are my button-classes for styling:这些是我的样式按钮类:
'.enabledButton': {
background: '#ffb303!important',
},
'.defaultButton': {
background: '#cfcfcf!important',
},
I tried to apply it in the false / true check.我试图将它应用于假/真检查。 If its true it should apply the.enabledButton and for the false case it should apply the.defaultButton.
如果为真,则应应用.enabledButton,如果为假,则应应用.defaultButton。
Can someone help me with it?有人可以帮我吗? Thank you very much!
非常感谢!
You can try it in 2 ways:您可以通过 2 种方式尝试:
1st Method: You can add the styles directly and do the validation like this (but its not preferrable to inject styles directly)第一种方法:您可以直接添加styles并像这样进行验证(但不推荐直接注入styles)
<div className={classes.root}> <Button variant="contained">Default</Button> <Button style={{ marginTop: 10, backgroundColor: `${this.props.date? '#ffb303':'#cfcfcf'}` }} disabled={this.props.date? false: true} variant="contained" color="primary">Send Request</Button>
2nd Method: You can use styles and do the validation in your code.第二种方法:您可以使用 styles 并在您的代码中进行验证。
const useStyles = makeStyles((theme) => ({ enabledButton: { backgroundColor: '#ffb303', }, defaultButton: { backgroundColor: '#cfcfcf', }, })); const classes = useStyles();
<div className={classes.root}> <Button variant="contained">Default</Button> <Button style={{ marginTop: 10, }} disabled={this.props.date? false: true} className={this.props.date? classes.enabledButton: classes.defaultButton} variant="contained" color="primary">Send Request</Button>
In your case you can use classes
atribute by material-ui.在您的情况下,您可以使用 material-ui 的
classes
属性。 I made you a full example using a functional component:我为你做了一个使用功能组件的完整示例:
import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(theme => ({
button: {
backgroundColor: '#ffb303',
},
disabledButton: {
backgroundColor: '#cfcfcf',
}
}))
export default () => {
const [disabled, setDisabled] = React.useState(false)
const classes = useStyles()
const toggleDisabled = () => setDisabled(prev => !prev)
return (
<>
<Button
disabled={disabled}
onClick={toggleDisabled}
classes={{
root: classes.button,
disabled: classes.disabled
}}
variant="contained"
>
Toggle
</Button>
<Button
disabled={!disabled}
onClick={toggleDisabled}
classes={{
root: classes.button,
disabled: classes.disabled
}}
variant="contained"
>
Toggle
</Button>
</>
)
}
Both options are covered in the working demo here 此处的工作演示中涵盖了这两个选项
Code snippet代码片段
const useStyles = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
// using classname
"& .Mui-disabled": {
background: "#ffb303"
}
}
}));
const useStyles2 = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
"&$disabled": {
background: "rgba(0, 0, 0, 0.12)",
color: "red",
boxShadow: "none"
}
},
disabled: {}
}));
export default function ContainedButtons(props) {
const classes = useStyles();
const classes2 = useStyles2();
return (
<>
<div className={classes.root}>
<Button
variant="contained"
color="primary"
disabled={props.date ? false : true}
>
Button (using css name)
</Button>
</div>
<div>
<Button
classes={{ root: classes2.root, disabled: classes2.disabled }}
variant="contained"
color="primary"
disabled={props.date ? false : true}
>
Button (using rule name)
</Button>
</div>
</>
);
}
simple and easy to use my snippet:简单易用我的片段:
<TextField
fullWidth={fullWidth}
disabled={disabled}
onChange={onChange}
InputProps={{
classes: {
underline: classes.underline,
disabled: disabled ? classes.disabled : {},
},
}}
{...rest}
/>
)
classes班级
const useStyles = makeStyles((theme) => ({
label: {
paddingRight: theme.spacing(1),
fontFamily: 'Montserrat Light',
fontSize: `0.875rem`,
},
underline: {
marginTop: 0,
marginBottom: 0,
fontFamily: 'Montserrat Light',
color: `${$white}`,
fontSize: `0.875rem`,
'&::after': {
borderBottom: `1px solid ${$white}`,
},
'&::before': {
borderBottom: `1px solid rgba(255, 255, 255, 0.36)`,
},
'&:hover&::before': {
borderBottom: `1px solid ${$white}`,
},
},
disabled: {
'&:hover&::before': {
borderBottom: `1px dotted rgba(255, 255, 255, 0.36)`,
},
},
}))
const useStyles = makeStyles({
enabledButton: {
background: '#ffb303!important',
'&:disabled': {
background: '#cfcfcf!important',
}
},
});
function Componenet() {
const classes = useStyles();
...
...
return (
<Button
className={classes.enabledButton}
disabled={!this.props.date}
onClick={this.sendRequest}
variant="contained"
color="primary"
>
Send Request
</Button>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.