I have a button in a React table which gets disabled based on the value in an adjacent column. For example, if the value in the adjacent column is Claimed, then the button gets disabled, however if it has the value Failed or is blank, the button can be clicked. Right now, Im able to disable button..however the color of the button isnt changing. Im using Material UI React ponents for the button. How to change the colour of the button when its disabled?
The code is as shown below:
<FlatButton
label="CLAIM"
disabled={
item.status === "Claimed" ||
item.status === "Progress" ||
item.status === "Resolved"
}
onClick={//Some action here}
labelStyle= {
{
color: '#FFFFFF',
fontWeight: 600,
fontSize: 11,
}}
style= {
{
borderRadius: '2px',
width: '60px',
border: 'solid 1px #d8dde3',
backgroundColor: '#00bfa5',
}}
I have a button in a React table which gets disabled based on the value in an adjacent column. For example, if the value in the adjacent column is Claimed, then the button gets disabled, however if it has the value Failed or is blank, the button can be clicked. Right now, Im able to disable button..however the color of the button isnt changing. Im using Material UI React ponents for the button. How to change the colour of the button when its disabled?
The code is as shown below:
<FlatButton
label="CLAIM"
disabled={
item.status === "Claimed" ||
item.status === "Progress" ||
item.status === "Resolved"
}
onClick={//Some action here}
labelStyle= {
{
color: '#FFFFFF',
fontWeight: 600,
fontSize: 11,
}}
style= {
{
borderRadius: '2px',
width: '60px',
border: 'solid 1px #d8dde3',
backgroundColor: '#00bfa5',
}}
Share
asked Oct 16, 2017 at 11:08
SeaWarrior404SeaWarrior404
4,16816 gold badges47 silver badges66 bronze badges
0
1 Answer
Reset to default 6You could do something like this :
const disabled = item.status === "Claimed" ||
item.status === "Progress" ||
item.status === "Resolved";
<FlatButton
label="CLAIM"
disabled={disabled}
onClick={//Some action here}
labelStyle= {
{
color: '#FFFFFF',
fontWeight: 600,
fontSize: 11,
}}
style= {
{
borderRadius: '2px',
width: '60px',
border: 'solid 1px #d8dde3',
backgroundColor: disabled ? DISABLED_COLOR' : '#00bfa5',
}} />