Add css to existing applied css based on condition in reactjs?

Question

I have a style const variable,

const style = {
  timeInput: {
    width: '3.75rem',
    outline: 'none',
    borderColor: 'transparent',
    fontSize: remCalc(12),
    color: darkestGrey
  },
}

Here is the input field,

<input
  style={style.timeInput} //here
  disabled={disabled}
  ref={instance => (this.dropDown = instance)}
  value={typeof time === 'string' ? time : moment(time).format('LT')}
  onChange={this.onTimeChange.bind(this)}
></input>

How can I add "opacity: '0.4'" css, when disabled is true ?

T.J. Crowder · Accepted Answer · 2020-01-28 11:49:36Z

3

You can create a new object with the property added to it. Before the JSX for that input:

let inputStyle = style.timeInput;
if (disabled) {
    inputStyle = {...inputStyle, opacity: "0.4"};
}

then use inputStyle instead of style.timeInput on the element.

If you like, you can avoid the if, but at the (very, very, very small) cost of creating an unnecessary object:

const inputStyle = {...style.timeInput, ...(disabled ? {opacity: "0.4"} : null)};

That works because spreading null is a no-op.

edited Jan 28, 2020 at 11:49

answered Jan 28, 2020 at 11:48

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T.J. Crowder Over a year ago

@Clarity - Doh! Thanks. :-)

Collectives™ on Stack Overflow

Add css to existing applied css based on condition in reactjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related