Style for disabled property in css object model

Question

For some reason, I need to pass CSS objects using CSS object model inside a react component. Here, I need styles for buttons when they are disabled and when not disabled. Like we do with: backgroundColor, borderRadius and such.

 const controlButton = {
        backgroundColor:"#006191",
        padding:"10px 20px",
        border:"none",
        borderRadius:"5px"
    }

This is where im trying to use it and wanto to pass the object in style.

Answer 1

const App = () => {

const [disable, setDisable] = useState(false);

return(
  <div>
    <button style={(style.active, disable && style.disable)}>Click</button>
  </div>
)
}

Answer 2

Not too elegant but working solution.

import React, { useState } from 'react';

const controlButtonEnabled = {
  backgroundColor: '#006191',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px',
};
const controlButtonDisabled = {
  backgroundColor: 'gray',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px',
};

export default function MyAwesomeComponent() {
  
  const [enabled, setEnabled] = useState(true);
  const onEnable = () => {
    setEnabled(!enabled);
  };

  return (
    
          <button
            onClick={onEnable}
            style={enabled ? controlButtonEnabled : controlButtonDisabled}
          >
            Button
          </button>
        >
  );
}